R Shiny renderTable-如何更改边框的宽度和颜色

Question

我可能有一个简单的问题，但是由于我对CSS / htlm不太熟悉，因此很难找出以下问题。在我的用户界面中，我有以下简单表格：

tableOutput("retail_dashboard_ratios_table")

在服务器中，我有这个非常简单的代码：

output$retail_dashboard_ratios_table <- renderTable({  #
df <- head(mtcars)
})

我要做的就是设置边框的宽度和边框的颜色（为蓝色）。我不得不使用R 3.4版本。因为我有一个静态的tableOutput，所以我（显然）不能使用Add Cell Borders in an R Datatable中提到的解决方案因为我无法返回数据表对象。

我也读过R shiny renderTable change cell colors，它有一个非常有趣的解决方案，但是考虑到我的R版本，似乎库（tableHTML）不兼容。

我想知道是否有人有简单的解决方案来解决边界问题。谢谢

Answer 1

一种更优雅的解决方案可能会与样式表一起使用，但是如果您只是要对一个表进行样式设置，则只需将CSS添加到HTML标头中，如下所示。有关更多信息，请参见here。我发现，棘手的部分通常是在这种情况下.table>tbody>tr>td, ...知道要覆盖哪个类。但是，找到所需内容的简单方法是在运行时检查HTML，例如在Google Chrome浏览器中，您可以右键单击+“检查”浏览器窗口中的任意位置（最好靠近您要设置样式的元素）。然后，您可以在运行时在浏览器中编辑样式，以预览对CSS所做的更改将如何影响应用程序的外观。我对CSS也不是很熟悉，但是这种方法通常会让我受益匪浅。

希望这会有所帮助！

shinyApp(

  # --- User Interface --- #

  ui = fluidPage(

    # The below overwrites the default styling for the top border of table cells. 
    # I've changed the colour to blue from grey and the width to 3px from 1px.
    tags$head(
      tags$style(HTML("
      .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 3px solid blue; 
      }
    "))
    ),

    mainPanel(
      tableOutput("retail_dashboard_ratios_table")
    )

  ),

  # --- Server logic --- #

  server = function(input, output) {
    output$retail_dashboard_ratios_table <- renderTable({  #
      df <- head(mtcars)
    })
  }

)

编辑

如果只想为一个表而不是应用程序中的所有表设置样式，则需要为其创建自己的CSS类。您只需在上面现有的CSS代码前面简单地写.my_table或#my_table，就可以很容易地提供一个名称四类。因此，要完成上述示例，但现在要使用单独的样式：

shinyApp(

  # --- User Interface --- #

  ui = fluidPage(

    # The below now creates a custum css class. 
    tags$head(
      tags$style(HTML("
      .my_table .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 3px solid blue; 
      }
    "))
    ),

    mainPanel(
      tags$div(
        class="my_table", # set to custom class
        tableOutput("retail_dashboard_ratios_table")
      ),
      tableOutput("another_table")
    )

  ),

  # --- Server logic --- #

  server = function(input, output) {
    output$retail_dashboard_ratios_table <- renderTable({  #
      df <- head(mtcars)
    })

    output$another_table <- renderTable({  #
      df <- head(iris)
    })
  }

)