Shiny应用设置datatable总宽或列宽 无需scrollX完整显示表格

你可以通过「容器宽度约束+表格自动列宽+单元格自动换行」的组合方式实现需求，不需要启用scrollX，可以适配全尺寸屏幕：

• 第一步：删除所有datatable配置中的scrollX = TRUE项，该参数会强制表格按内容最小宽度渲染，无法跟随父容器缩放
• 第二步：为DT开启自动宽度适配，同时通过CSS强制表格100%继承父列容器的宽度，允许单元格长文本自动换行，避免内容撑开表格
• 第三步：（可选）通过DT的columnDefs参数按比例分配各列宽度，不需要写死像素值，适配不同分辨率下的宽度变化
• 第四步：给外层列加响应式断点，手机等窄屏设备下三个表格自动垂直堆叠，不会出现内容挤压溢出的问题

修改后的完整示例代码 #

library(shiny)
library(DT)
library(dplyr)

dat<-structure(list(Population = c("p1", "p1", "p1", "p1", "p1", "p1", 
                                   "p1", "p1", "p1", "p1", "p2", "p2", "p2", "p2", "p2", "p2"), 
                    var1 = c("p1_1_a", "p1_1_b", "p1_2_a", "p1_2_b", "p1_3_a", 
                             "p1_3_b", "p1_4_a", "p1_4_b", "p1_5_a", "p1_5_b", "p2_a", 
                             "p2_b", "p2_c", "p2_d", "p2_e", "p2_f"),
                    
                    Population2 = c("p1", "p1", "p1", "p1", "p1", "p1", 
                                    "p1", "p1", "p1", "p1", "p2", "p2", "p2", "p2", "p2", "p2"), 
                    var12 = c("p1_1_a", "p1_1_b", "p1_2_a", "p1_2_b", "p1_3_a", 
                              "p1_3_b", "p1_4_a", "p1_4_b", "p1_5_a", "p1_5_b", "p2_a", 
                              "p2_b", "p2_c", "p2_d", "p2_e", "p2_f"),U = c(1, 1, 0, 0, 
                                                                           1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 0), D = c(25, 12, 14, 11, 
                                                                                                                      3, 3, 2, 4, 5, 0, 0, 0, 0, 25, 12, 14),
                    Udad = c(1, 1, 0, 0, 
                             1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 0), Ddshgg = c(25, 12, 14, 11, 
                                                                              3, 3, 2, 4, 5, 0, 0, 0, 0, 25, 12, 14)), row.names = c(NA, 
                                                                                                                                     -16L), class = c("tbl_df", "tbl", "data.frame"))

ui <- fluidPage(
  # 全局CSS控制表格宽度和单元格换行
  tags$style(HTML("
    .dt-container, .dataTables_wrapper {
      width: 100% !important;
    }
    table.dataTable {
      width: 100% !important;
      white-space: normal !important;
    }
    table.dataTable td, table.dataTable th {
      word-break: break-word;
      padding: 4px 6px !important;
    }
  ")),
  fluidRow(
    # 响应式列：中等屏幕以上各占1/3宽度，小屏幕占满整行垂直堆叠
    column(width = 4, class = "col-sm-12 col-md-4",
           DTOutput("table")),
    column(width = 4, class = "col-sm-12 col-md-4",
           DTOutput("table2")
    ),
    column(width = 4, class = "col-sm-12 col-md-4",
           DTOutput("table3"))
  )
)

server <- function(input, output){
  
  output[["table"]] <- renderDT({
    dtable <- datatable(dat, rownames = FALSE, 
                        options = list(
                          autoWidth = TRUE,
                          # 按比例分配列宽，总占比100%即可
                          columnDefs = list(
                            list(width = '12%', targets = c(0,2,4,6)),
                            list(width = '20%', targets = c(1,3)),
                            list(width = '8%', targets = c(5,7))
                          ),
                          order = list(list(1, 'asc')),
                          pageLength=16
                        ))
    dtable
  })
  output[["table2"]] <- renderDT({
    dtable <- datatable(dat, rownames = FALSE, 
                        options = list(
                          autoWidth = TRUE,
                          columnDefs = list(
                            list(width = '12%', targets = c(0,2,4,6)),
                            list(width = '20%', targets = c(1,3)),
                            list(width = '8%', targets = c(5,7))
                          ),
                          order = list(list(1, 'asc')),
                          pageLength=16
                        ))
    dtable
  })
  output[["table3"]] <- renderDT({
    dat$Comparison1<-NA
    dat$cOMPARISON2<-NA
    dtable <- datatable(dat, rownames = FALSE, 
                        options = list(
                          autoWidth = TRUE,
                          # 第三个表多两列，重新分配宽度比例
                          columnDefs = list(
                            list(width = '10%', targets = c(0,2,4,6)),
                            list(width = '16%', targets = c(1,3)),
                            list(width = '7%', targets = c(5,7)),
                            list(width = '12%', targets = c(8,9))
                          ),
                          order = list(list(1, 'asc')),
                          pageLength=16
                        ))
    dtable
  })
}

shinyApp(ui, server)

关键配置说明 #

• 全局CSS部分：强制DT容器和表格本身100%继承父容器宽度，覆盖DT默认的单元格不换行规则，长文本自动断行，同时缩小单元格内边距节省横向空间
• autoWidth = TRUE：开启DT的自动宽度计算，让列宽跟随容器宽度动态调整
• columnDefs：按百分比给各列分配宽度占比，不需要写死固定像素值，不管屏幕分辨率多少，各列都会按设定的比例自动适配宽度
• 列的响应式class：给每个外层列加col-sm-12 col-md-4，屏幕宽度小于768px（手机端）时每个表格自动占满整行，垂直排列，不会出现内容过度挤压的问题

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