如何垂直对齐DT渲染的数据框中的numericInput组件？

这个问题很常见——DT的className = "dt-center"和formatStyle的垂直对齐设置只作用于单元格本身，但numericInput作为内嵌的HTML输入元素，自带Bootstrap的默认样式，这些样式会覆盖单元格的对齐规则，导致它和其他文本无法保持一致的对齐效果。

解决方案：直接针对input元素设置CSS样式 #

我们需要把对齐规则直接应用到表格里的input元素上，下面提供两种简单易实现的方式：

方式1：在UI中添加全局自定义CSS

这种方式最直接，能确保所有DT表格里的input都统一对齐：

library(shiny)
library(shinydashboard)
library(DT)

shinyInput <- function(FUN, len, id, ...) {
  inputs <- character(len)
  for (i in seq_len(len)) {
    inputs[i] <- as.character(FUN(paste0(id, i), ...))
  }
  inputs
}

df <- iris
df$num <- shinyInput(numericInput, nrow(df), "num_", label = NULL, value=NULL)

ui <- dashboardBody(
  # 添加自定义CSS，针对DT表格里的input元素设置对齐
  tags$style(HTML("
    .datatables .dt-center input {
      vertical-align: middle;  /* 垂直居中 */
      margin: 0 auto;          /* 水平居中（块级元素需此属性生效） */
      display: block;          /* 将input转为块级元素，方便margin:auto生效 */
    }
  ")),
  box(fluidPage(DT::dataTableOutput('DTdf')))
)

server <- function(input, output){
  dfDT <- reactive({df})
  output$DTdf <- DT::renderDT({
    datatable(dfDT(), escape=F, editable="all", options = list(
      columnDefs = list(list(className = "dt-center", targets="_all")),
      preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
      drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
    )) %>% 
      formatStyle(6, "vertical-align" = "middle")  # 确保单元格本身垂直居中
  })
}

shinyApp(ui=ui, server=server)

方式2：通过DT的formatStyle直接设置子元素样式

如果只想针对某一列的input做对齐设置，可以用target = "cell.child"指定单元格内的子元素：

output$DTdf <- DT::renderDT({
  datatable(dfDT(), escape=F, editable="all", options = list(
    columnDefs = list(list(className = "dt-center", targets="_all")),
    preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
    drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
  )) %>% 
    formatStyle(6, "vertical-align" = "middle") %>%
    # 针对第6列的子元素（即numericInput）设置样式
    formatStyle(6, target = "cell.child",
                `vertical-align` = "middle",
                `text-align` = "center",
                `display` = "block",
                `margin` = "0 auto")
})

原理说明 #

• 默认的numericInput是inline-block元素，margin: auto无法生效，设置display: block后可以让它在单元格内水平居中。
• 同时设置vertical-align: middle能确保它和单元格内其他内容垂直对齐，覆盖input元素默认的垂直对齐方式。

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