如何让Shiny中动态生成的表格横向排列而非纵向？

要实现动态生成的表格横向排列，最便捷的方式是利用CSS Flexbox布局，它能自动处理未知数量的元素，让它们横向排列并在空间不足时自动换行。以下是修改后的完整代码：

library(rhandsontable)
library(shiny)

rowNames1 <- c("A", "B", "C", "Sum")
data1 <- data.frame(row.names = rowNames1, "Col 1" = c(1, 1, 0, 2), check.names = FALSE)

ui <- fluidPage(
  rHandsontableOutput("hottable1"),       
  actionButton("addTbl", "Add table"),    
  # 修改placeholder为flex容器，设置横向排列、自动换行、元素间距
  tags$div(id = "placeholder", style = "display: flex; flex-wrap: wrap; gap: 25px; margin-top: 20px;")            
)

server <- function(input, output) {
  uiTbl1 <- reactiveValues(base = data1)  

  observeEvent(input$hottable1,{uiTbl1$base <- hot_to_r(input$hottable1)})
  
  output$hottable1 <- renderRHandsontable({
    rhandsontable(uiTbl1$base, rowHeaderWidth = 100, useTypes = TRUE)
  })
  
  observeEvent(input$addTbl, {
    divID <- gsub("\\.", "", format(Sys.time(), "%H%M%OS3"))
    dtID <- paste0(divID, "DT")
    uiTbl1[[paste0(divID,"tbl")]] <- data1 
    
    insertUI(
      selector = "#placeholder",
      ui = tags$div(
        id = divID,
        # 给每个表格容器设置固定宽度，避免拉伸变形
        style = "width: 280px;",
        rHandsontableOutput(dtID)
        # 移除hr，避免横向布局时占整行影响排列
      )
    )
    output[[dtID]] <- renderRHandsontable({
      req(uiTbl1[[paste0(divID,"tbl")]])
      rhandsontable(uiTbl1[[paste0(divID,"tbl")]], rowHeaderWidth = 100, useTypes = TRUE)
    })
  })
}

shinyApp(ui, server)

关键修改说明： #

• Flex容器设置：给placeholder添加style = "display: flex; flex-wrap: wrap; gap: 25px;"，其中：
  • display: flex：将容器设为flex布局，子元素默认横向排列
  • flex-wrap: wrap：当容器宽度不足时，子元素自动换行
  • gap: 25px：设置表格之间的间距，避免拥挤
• 表格容器样式：给每个新增的表格容器设置固定宽度width: 280px;，确保每个表格尺寸一致，布局更整齐
• 移除多余元素：删除了原代码中的hr，因为横向布局时水平线会占整行，破坏排列效果；如果需要分隔线，可以改为给表格容器添加边框样式（比如border: 1px solid #eee; padding: 10px;）

内容的提问来源于stack exchange，提问作者Village.Idyot