如何实现Shiny中DT表格的部分列垂直对齐？

需求说明 #

在Shiny应用中垂直放置两个DT表格：

• 上方为原始数据的统计摘要表
• 下方为原始数据表，右侧多一列Note
• 要求两表的前N列（Item、Data1~Data4）宽度对齐，Note列向右延伸

参考效果（Excel示例）：

解决方案代码 #

核心思路是手动指定两个表格的对应列宽，关闭DT的自动宽度调整，确保列对齐。修改后的完整代码如下：

library(shiny)
library(data.table)
library(matrixStats)
library(DT)

ui = fluidPage(
  mainPanel(
    DT::dataTableOutput("stats"),
    tags$br(),
    DT::dataTableOutput("raw")
  )
)

server = function(input, output){
  
  set.seed(123)
  raw = data.table(
    Item = c("ABC", "DEF", "LMO", "XYZ"),
    Data1 = runif(4, 1, 1000),
    Data2 = runif(4, 1, 1000),
    Data3 = runif(4, 1, 1000),
    Data4 = runif(4, 1, 1000),
    Note = c(
      "Some notes are quite short", 
      "Some notes could be very long, perhaps up to 100 or 150 characters", 
      NA_character_, 
      NA_character_
    )
  )
  
  cols = colnames(raw)[2:5]
  stats = data.table(
    min = colMins(as.matrix(raw[, ..cols])),
    mean = colMeans(as.matrix(raw[, ..cols])),
    median = colMedians(as.matrix(raw[, ..cols])),
    max = colMaxs(as.matrix(raw[, ..cols]))
  )
  stats = data.table(t(stats), keep.rownames = T)
  colnames(stats) = c("Stat", cols)
  
  # 定义共同列的宽度（单位：像素）
  common_col_widths = c("80px", "100px", "100px", "100px", "100px")
  
  # 统计摘要表：设置列宽，关闭自动宽度
  stats_dt = datatable(
    stats, 
    rownames = F, 
    filter = "none",
    options = list(
      dom = 't', 
      iDisplayLength = -1,
      autoWidth = FALSE,
      columnDefs = lapply(seq_along(common_col_widths), function(i){
        list(targets = i-1, width = common_col_widths[i])
      })
    )
  )
  
  # 原始数据表：对应列使用相同宽度，Note列单独设置宽度
  raw_dt = datatable(
    raw, 
    rownames = F, 
    filter = "none",
    options = list(
      dom = 't', 
      iDisplayLength = -1,
      autoWidth = FALSE,
      columnDefs = c(
        lapply(seq_along(common_col_widths), function(i){
          list(targets = i-1, width = common_col_widths[i])
        }),
        list(targets = 5, width = "300px")  # Note列宽度
      )
    )
  )
  
  output$raw <- DT::renderDataTable(raw_dt)
  output$stats <- DT::renderDataTable(stats_dt)
}

shinyApp(ui = ui, server = server)

关键修改点 #

• 关闭DT的autoWidth选项，避免自动调整列宽打乱对齐
• 手动定义共同列的宽度数组common_col_widths，确保两个表格的对应列宽度完全一致
• 给原始表的Note列单独设置合适宽度，让其向右延伸而不影响其他列的对齐效果

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