html - ShinyUI - 如何在流体行/列网格中添加垂直/水平线？

Question

我的屏幕上有 8 个表格，我想将它们分成四个 Pane 。 请问如何在我的 fluidrow() + column() 网格中添加垂直线和水平线？

目标设计:

当前设计:

可重现代码:

DTWrapper <- function(data){
  datatable(data, 
            options = list(dom='t',ordering=F, 
                           columnDefs=list(list(targets=1:2, className="dt-right"))), 
            caption= htmltools::tags$caption(
              style = "caption-side: left; text-align: left; color:black;", "Title"), 
            rownames = FALSE)
}
################################################################################
server = function(input, output) {

  ds <- head(mtcars[,1:3])
  output$one <- DT::renderDataTable(DTWrapper(ds))
  output$two <- DT::renderDataTable(DTWrapper(ds))
  output$three <- DT::renderDataTable(DTWrapper(ds))
  output$four <- DT::renderDataTable(DTWrapper(ds))
  output$five <- DT::renderDataTable(DTWrapper(ds))
  output$six <- DT::renderDataTable(DTWrapper(ds))
  output$seven <- DT::renderDataTable(DTWrapper(ds))
  output$eight <- DT::renderDataTable(DTWrapper(ds))
}
################################################################################
ui = fluidPage(

  fluidRow(column(2, DT::dataTableOutput("one"),style='margin-bottom:30px; padding: 5px;') 
           ,column(2,
                   DT::dataTableOutput("two"),style='margin-bottom:30px;border-right:1px solid; padding: 5px;')  
           ,column(2,
                   DT::dataTableOutput("three"),style='margin-bottom:30px; padding: 5px;')  
           ,column(2,
                   DT::dataTableOutput("four"),style='margin-bottom:30px; padding: 5px;')  
  ), hr(),
  fluidRow(column(2,
                  DT::dataTableOutput("five"),style='margin-bottom:30px; padding: 5px;') 
           ,column(2,style='margin-bottom:30px;border-right:1px solid; padding: 5px;') 
           ,column(2,
                   DT::dataTableOutput("seven"),style='margin-bottom:30px; padding: 5px;') 
           ,column(2,
                   DT::dataTableOutput("eight"),style='margin-bottom:30px; padding: 5px;') 
  )
)
shinyApp(server=server, ui=ui)

编辑:

根据@Hao 的回答，我尝试在column(.) 中添加border-right 样式，但结果并不尽如人意。

Answer 1

您可以将 border: 1px solid 放在列的样式部分。

column(2, DT::dataTableOutput("one"),
  style='margin-bottom:30px;border:1px solid; padding: 10px;') 

或者您可以在 UI 的 tags$head 中定义一个 css 类，并在此处调用类名。

---

您似乎想要一些面板？

我会用类似的东西

tags$div(
class = "panel panel-default", 
tags$div(class="panel-heading", "xxxx"),
tags$div(
class="panel-body",
row(column(...), column(...))
)