R Shiny DT单元格内文本与输入控件同行无换行实现方案

换行问题的核心原因：Shiny 生成的各类输入控件外层默认包裹带form-group类的<div>块级标签，块级元素默认独占整行，因此会把前后拼接的文本挤到控件上下行。
之前尝试display: inline失效的核心原因：行内（inline）元素无法正常承载控件自带的宽度、内边距、外边距属性，不仅无法实现同行排列，还会破坏控件原有尺寸样式。

推荐实现方案（无样式破坏、适配所有Shiny输入控件） #

不需要修改Shiny控件本身的生成逻辑，只需要给单元格内的所有内容（前置文本+输入控件+后置文本）包裹一层统一的容器，通过CSS弹性布局强制内容同行排列，完全不会影响控件原有样式：

• 容器设置display: flex开启弹性布局，子元素默认横向排列
• 加align-items: center实现文本和控件垂直居中对齐，避免错位
• 加gap: 6px控制文本和控件的间距，可根据需求调整数值
• 加white-space: nowrap禁止文本自身折行

修改后可直接运行的完整代码 #

library(DT)

ui <- basicPage(
  h2("The mtcars data"),
  DT::dataTableOutput("mytable")
)

server <- function(input, output) {
  
  shinyInput <- function(FUN, len, id, ...) {
    inputs <- character(len)
    for (i in seq_len(len)) {
      inputs[i] <- as.character(FUN(paste0(id, i), ...))
    }
    inputs
  }
  
  mtcarsx <- data.frame(mtcars, newvar=
                         paste0(
                           # 外层包裹弹性布局容器
                           '<div style="display: flex; align-items: center; gap: 6px; white-space: nowrap;">',
                           "text before ",
                           shinyInput(checkboxInput,nrow(mtcars),"mychbx",label="",value=FALSE,width=NULL),
                           " text after",
                           "</div>"
                         ))

  
  output$mytable = DT::renderDataTable({
    DT::datatable(mtcarsx, 
                  escape = FALSE, 
                  selection = 'none', 
                  rownames = FALSE, 
                  extensions = 'RowGroup', 
                  options = list(searching = FALSE, 
                                 ordering  = FALSE,
                                 rowGroup = list(dataSrc=c(1)),
                                 columnDefs = list(list(visible=FALSE, targets=c(1)))
                                 ))
  })
  
}

shinyApp(ui, server)

补充说明 #

• 该方案对文本输入框、下拉选择框、单选按钮、动作按钮等所有Shiny原生输入控件均生效
• 如果需要调整控件和文本的间距，直接修改gap属性的数值即可
• 如果需要给控件设置固定宽度，直接在Shiny输入控件的width参数传值即可，不会被布局样式破坏

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