You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为并排的多个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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.24 20:54:17