Shiny中DT::dataTableOutput设height后UI重叠，如何优化高度控制？

直接给DT::dataTableOutput设置height属性后出现内容溢出覆盖下方按钮，是因为表格容器未正确预留滚动空间导致的。以下是几种实用的解决办法：

方法1：在renderDT中配置滚动高度（推荐） #

不在dataTableOutput中设置height，转而在renderDT的options参数里配置scrollY，让表格自带滚动条，容器会自动适配高度，不会溢出覆盖下方元素：

library(shiny)
library(DT)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel = sidebarPanel(
      DT::dataTableOutput("dtout"),
      fluidRow(
        actionButton("btn1","Btn1"),
        actionButton("btn2","Btn2"),
        actionButton("btn3","Btn3"),
        actionButton("btn4","Btn4"),
        actionButton("btn5","Btn5"),
        actionButton("btn6","Btn6"),
        actionButton("btn7","Btn7"),
        actionButton("btn8","Btn8"),
        actionButton("btn9","Btn9")
      )
    ),
    mainPanel = mainPanel()
  )
)

server <- function(input, output, session) {
  output$dtout <- DT::renderDT(
    iris,
    options = list(
      scrollY = "300px",
      scrollCollapse = TRUE,
      paging = FALSE # 不需要分页可关闭，按需选择
    )
  )
}

shinyApp(ui, server)

方法2：给表格容器添加溢出控制 #

如果一定要在dataTableOutput中设置height，可以给它套一个带有溢出控制样式的div，强制容器出现滚动条，避免内容溢出：

library(shiny)
library(DT)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel = sidebarPanel(
      div(
        DT::dataTableOutput("dtout", height = "300px"),
        style = "overflow-y: auto;"
      ),
      fluidRow(
        actionButton("btn1","Btn1"),
        actionButton("btn2","Btn2"),
        actionButton("btn3","Btn3"),
        actionButton("btn4","Btn4"),
        actionButton("btn5","Btn5"),
        actionButton("btn6","Btn6"),
        actionButton("btn7","Btn7"),
        actionButton("btn8","Btn8"),
        actionButton("btn9","Btn9")
      )
    ),
    mainPanel = mainPanel()
  )
)

server <- function(input, output, session) {
  output$dtout <- DT::renderDT(iris)
}

shinyApp(ui, server)

方法3：手动拉开元素间距 #

如果只是临时调整，可在表格和按钮之间添加分隔元素，比如hr()或br()，手动拉开距离：

# 在dataTableOutput和fluidRow之间插入
hr(),
br()

内容的提问来源于stack exchange，提问作者Noskario