Shiny应用中含复选框的DT数据表移除单元格内边距方案求助

当DT数据表嵌入Shiny复选框后，常规的单元格内边距调整方法会失效——原因是Shiny的复选框组件自带默认的外边距和内边距，需要同时调整表格单元格和复选框的样式才能实现压缩效果。以下是两种可行的解决方案：

方法一：自定义CSS全局调整（推荐） #

在UI中添加自定义CSS样式，直接覆盖表格单元格和复选框的默认样式，这种方式灵活且效果稳定：

library(shiny)
library(DT)
library(tidyverse)

shinyApp(
  ui <- fluidPage(
    # 添加自定义CSS压缩表格和复选框边距
    tags$style(HTML("
      /* 调整表格单元格内边距，数值按需修改 */
      #x1 table td, #x1 table th {
        padding: 2px 4px !important;
      }
      /* 去掉复选框容器的默认外边距和内边距 */
      #x1 .checkbox {
        margin: 0 !important;
        padding: 0 !important;
      }
      /* 去掉复选框输入框的默认外边距 */
      #x1 .checkbox input {
        margin: 0 !important;
      }
    ")),
    DT::dataTableOutput('x1')
  ),
  
  server<-function(input, output, session) {
    shinyInput<-function(FUN, len, id, ...) {
      inputs <- character(len)
      for (i in seq_len(len)) {
        inputs[i] <- as.character(FUN(paste0(id, i), label=NULL, ...))
      }
      inputs
    }
    
    values <- reactiveValues(res=data.frame(
      iris %>% slice(1:10),
      v2=shinyInput(checkboxInput, 10, 'v2_', value=FALSE)
    ))
    
    output$x1 <- DT::renderDataTable(
      datatable(values$res, escape = FALSE),
      server=FALSE
    )
  }
)

方法二：结合DT的formatStyle调整 #

如果偏好使用DT自带的样式设置方法，可以在datatable()中通过formatStyle调整单元格内边距，同时配合回调函数调整复选框样式：

output$x1 <- DT::renderDataTable(
  datatable(values$res, escape = FALSE) %>%
    formatStyle(columns = colnames(values$res),
                padding = '2px 4px'),
  server=FALSE,
  callback = JS("
    $('.checkbox').css('margin', '0');
    $('.checkbox input').css('margin', '0');
  ")
)

关键说明 #

• !important用于强制覆盖默认样式，确保自定义设置生效；
• 单元格内边距的数值（2px 4px）可按需调整，数值越小表格压缩程度越高；
• 需保持server=FALSE，确保客户端渲染时样式能正确应用到所有行。

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