ShinyUI - 如何在 fluidrow/col 网格中添加竖直/水平线？

Question

我在屏幕上有8张表格，并想将它们分成四个窗格。请问如何在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 样式，但结果并不如预期。

- hartmut

---

相关链接：https://dev59.com/_1UM5IYBdhLWcg3wQeaJ - Werner

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(...))
)

- Hao

---

谢谢。我已经尝试单独为表格添加一些边框，但这还没有完全解决问题。我已相应地编辑了我的问题 :)。 - hartmut