如何为并排的多个DT::datatable添加统一纵向滚动条?
为并排的DT::datatable添加统一纵向滚动条
可以实现,核心思路是把两个表格放到同一个带纵向滚动条的容器中,让表格高度自适应容器,去掉表格自身的滚动配置,实现统一滚动效果。修改后的代码如下:
## app.R ## library(shiny) library(shinydashboard) library(DT) ui <- dashboardPage( dashboardHeader(title = "My Chart"), dashboardSidebar(width = 0), dashboardBody( # 外层滚动容器,统一控制纵向滚动 div( style = "height:500px; overflow-y: auto; overflow-x: auto;", fluidRow( column( width = 6, DT::dataTableOutput("trace_table") ), column( width = 6, DT::dataTableOutput("trace_table2") ) ) ) ) ) server <- function(input, output) { output$trace_table <- renderDataTable({ datatable( cbind(mtcars, mtcars), options = list( paging = FALSE, scrollY = "100%", # 表格高度自适应容器 scrollX = TRUE # 保留横向滚动(按需开启) ) ) }) output$trace_table2 <- renderDataTable({ datatable( cbind(mtcars, mtcars), options = list( paging = FALSE, scrollY = "100%", scrollX = TRUE ) ) }) } shinyApp(ui, server)
关键修改点说明:
- 新增外层
div容器,通过style设置固定高度500px,并开启overflow-y: auto(内容超出时显示纵向滚动条),overflow-x: auto处理横向溢出需求。 - 移除每个
column中的独立滚动样式,避免表格自身出现滚动条。 - 在
datatable的options中设置scrollY = "100%",让表格高度填满所在容器,确保两个表格高度一致,滚动时同步。 - 保留
scrollX = TRUE可实现横向滚动,不需要的话可以移除。
内容的提问来源于stack exchange,提问作者firmo23
相关产品推荐
相关产品推荐

