如何为Shiny应用中单个DT数据表设置固定宽度CSS样式？

要只给第二个DT表设置固定宽度，避免样式全局影响，你可以通过精准定位CSS选择器实现，以下是两种可行方案：

方法一：利用输出容器ID定位 #

Shiny中DT::dataTableOutput("fixed_width")会生成一个ID为fixed_width的div容器，里面包含对应的DT表格。我们可以用CSS后代选择器，仅对这个容器内的表格应用样式：

修改UI中的样式部分，将全局选择器改为定向选择：

tags$style(HTML("#fixed_width table.dataTable {table-layout: fixed;}"))

完整代码示例：

data(starwars)
starwars = starwars[1:5,1:4]

ui = fluidPage(
  DT::dataTableOutput("variable_width"),
  tags$style(HTML("#fixed_width table.dataTable {table-layout: fixed;}")),
  DT::dataTableOutput("fixed_width")
)

server = function(input, output, session){
  output$variable_width = DT::renderDataTable({ starwars }, options = list(dom = "t"))
  output$fixed_width = DT::renderDataTable({ starwars }, options = list(dom = "t"))
}

shinyApp(ui, server)

方法二：给目标表格添加自定义类 #

也可以在渲染第二个DT时为它添加专属CSS类，再通过类选择器设置样式：

在renderDataTable中添加class参数，同时修改UI中的样式规则：

data(starwars)
starwars = starwars[1:5,1:4]

ui = fluidPage(
  DT::dataTableOutput("variable_width"),
  tags$style(HTML(".fixed-table table.dataTable {table-layout: fixed;}")),
  DT::dataTableOutput("fixed_width")
)

server = function(input, output, session){
  output$variable_width = DT::renderDataTable({ starwars }, options = list(dom = "t"))
  output$fixed_width = DT::renderDataTable({ starwars }, 
                                           class = "fixed-table",
                                           options = list(dom = "t"))
}

shinyApp(ui, server)

这两种方法都能确保固定宽度样式只作用于第二个表，第一个表保持默认的动态宽度。之前用div隔离失败，通常是因为没有正确设置div的标识，或者CSS选择器没有精准指向div内部的表格。

内容的提问来源于stack exchange，提问作者Simon.S.A.