Как создать div, который будет исправлен при горизонтальной прокрутке контейнера, без переполнения контейнера по вертикали?

Question

К сожалению, я не смог создать воспроизводимый пример в HTML, потому что разрабатываемое мной приложение - блестящее приложение на языке R, но у меня проблема с частью html / css.

На изображении ниже, у меня есть div, выделенный синим прямоугольником, содержащим таблицу (с использованием rHandsonTable), мне нужно сделать его фиксированным при горизонтальной прокрутке, но когда я использую фиксированное положение, он переполняетконтейнер.Все остальные таблицы также находятся внутри div:

Вот воспроизводимый пример в R с блестящим:

library(shinydashboard)
library(shiny)
library(rhandsontable)

data <- data.frame(
  COL_A = rep('A', 29),COL_B = rep('B', 29),COL_C = rep('C', 29),COL_D = rep(9999, 29),
  COL_E = rep(9999 , 29),COL_F = rep(9999, 29),COL_G = rep(9999, 29),COL_H = rep(9999, 29),
  COL_I = rep(9999, 29),COL_J = rep(9999, 29),COL_K = rep(9999, 29),COL_L = rep(9999, 29),
  COL_M = rep(9999, 29),COL_N = rep(9999, 29),COL_O = rep(9999, 29),COL_P = rep(9999, 29),
  COL_Q = rep(9999, 29),COL_R = rep(9999, 29),COL_S = rep(9999, 29),COL_T = rep(9999, 29),
  COL_U = rep(9999, 29),COL_V = rep(9999, 29),COL_X = rep(9999, 29),COL_Y = rep(9999, 29),
  COL_Z = rep(9999, 29)
)

dsHead <- dashboardHeader(title='Example', titleWidth = '100%')

dsSideBar <- dashboardSidebar(disable = TRUE)

dsBody <- dashboardBody(
  box(width = 12, 
      div(style = 'overflow-x:scroll; overflow-y: auto', class = 'hot_semborda',
          div(style='white-space:nowrap;height:400px',
              div(style='display: inline-block;padding-left: 200px;position:fixed',
                  rHandsontableOutput('hot_abs')),
              div(style='display: inline-block;padding-left: 200px;',
                  rHandsontableOutput('hot_imp')),
              div(style='display: inline-block;padding-left: 200px;',
                  rHandsontableOutput('hot_ent')),
              div(style='display: inline-block;padding-left: 200px;',
                  rHandsontableOutput('hot_transf')),
              div(style='display: inline-block;padding-left: 200px;',
                  rHandsontableOutput('hot_vda')),
              div(style='display: inline-block;padding-left: 200px;',
                  rHandsontableOutput('hot_pes')))
      )
  )
)

ui <- dashboardPage(dsHead, dsSideBar, dsBody)

server <- function(input,output,session) {
  output$hot_abs <- renderRHandsontable(
    rhandsontable(data[,c('COL_A', 'COL_B', 'COL_C')])
  )

  output$hot_imp <- renderRHandsontable(
    rhandsontable(data[,c('COL_D', 'COL_E', 'COL_F', 'COL_G', 'COL_H')])
  )

  output$hot_ent <- renderRHandsontable(
    rhandsontable(data[,c('COL_K', 'COL_L', 'COL_M', 'COL_N', 'COL_O')])
  )

  output$hot_transf <- renderRHandsontable(
    rhandsontable(data[,c('COL_P', 'COL_Q', 'COL_R', 'COL_S', 'COL_T')])
  )

  output$hot_vda <- renderRHandsontable(
    rhandsontable(data[,c('COL_U', 'COL_V', 'COL_X')])
  )

  output$hot_pes<- renderRHandsontable(
    rhandsontable(data[,c('COL_Y', 'COL_Z')])
  )
}

shinyApp(ui, server)

Answer 1

Может быть, вы могли бы использовать два поля, размещая их соответствующим образом.Поскольку вы хотите, чтобы ваши столбцы A, B, C всегда отображались слева, возможно, вы могли бы использовать один небольшой блок A, B, C и другой для оставшихся столбцов.

Как я понимаю, добавление тегов HTML приводит к изменениям на всей странице, а не на каждом блестящем элементе.Так что, вероятно, он полностью игнорирует пределы поля.

library(shinydashboard)
library(shiny)
library(rhandsontable)

data <- data.frame(
  COL_A = rep('A', 29),COL_B = rep('B', 29),COL_C = rep('C', 29),COL_D = rep(9999, 29),
  COL_E = rep(9999 , 29),COL_F = rep(9999, 29),COL_G = rep(9999, 29),COL_H = rep(9999, 29),
  COL_I = rep(9999, 29),COL_J = rep(9999, 29),COL_K = rep(9999, 29),COL_L = rep(9999, 29),
  COL_M = rep(9999, 29),COL_N = rep(9999, 29),COL_O = rep(9999, 29),COL_P = rep(9999, 29),
  COL_Q = rep(9999, 29),COL_R = rep(9999, 29),COL_S = rep(9999, 29),COL_T = rep(9999, 29),
  COL_U = rep(9999, 29),COL_V = rep(9999, 29),COL_X = rep(9999, 29),COL_Y = rep(9999, 29),
  COL_Z = rep(9999, 29)
)

dsHead <- dashboardHeader(title='Example', titleWidth = '100%')

dsSideBar <- dashboardSidebar(disable = TRUE)

dsBody <- dashboardBody(
  box(width = 2,
      div(style = 'overflow-x:scroll; overflow-y: auto', class = 'hot_semborda',
          div(style='white-space:nowrap;height:400px',
              div(
                  rHandsontableOutput('hot_abs'))
          )
      )
  ),
  box(width = 10, 
      div(style = 'overflow-x:scroll; overflow-y: auto', class = 'hot_semborda',
          div(style='white-space:nowrap;height:400px',
              div(style='display: inline-block;padding-left: 200px;',
                  rHandsontableOutput('hot_imp')),
              div(style='display: inline-block;padding-left: 200px;',
                  rHandsontableOutput('hot_ent')),
              div(style='display: inline-block;padding-left: 200px;',
                  rHandsontableOutput('hot_transf')),
              div(style='display: inline-block;padding-left: 200px;',
                  rHandsontableOutput('hot_vda')),
              div(style='display: inline-block;padding-left: 200px;',
                  rHandsontableOutput('hot_pes')))
      )
  )
)

ui <- dashboardPage(dsHead, dsSideBar, dsBody)

server <- function(input,output,session) {
  output$hot_abs <- renderRHandsontable(
    rhandsontable(data[,c('COL_A', 'COL_B', 'COL_C')])
  )

  output$hot_imp <- renderRHandsontable(
    rhandsontable(data[,c('COL_D', 'COL_E', 'COL_F', 'COL_G', 'COL_H')])
  )

  output$hot_ent <- renderRHandsontable(
    rhandsontable(data[,c('COL_K', 'COL_L', 'COL_M', 'COL_N', 'COL_O')])
  )

  output$hot_transf <- renderRHandsontable(
    rhandsontable(data[,c('COL_P', 'COL_Q', 'COL_R', 'COL_S', 'COL_T')])
  )

  output$hot_vda <- renderRHandsontable(
    rhandsontable(data[,c('COL_U', 'COL_V', 'COL_X')])
  )

  output$hot_pes<- renderRHandsontable(
    rhandsontable(data[,c('COL_Y', 'COL_Z')])
  )
}

shinyApp(ui, server)