使用 bslib 和 Bootstrap 样式删除数据表中的单元格边框

Question

在一个闪亮的应用程序中，我使用 bslib 库和具有引导样式的数据表来应用 Yeti 主题。与使用其他引导样式（例如 bootstrap5）或闪亮主题库而不是 bslib 不同，数据表中有不需要的白色单元格边框，我无法摆脱它。

我尝试进行 CSS 覆盖，但似乎不起作用：

library(shiny)
library(DT)
library(bslib)

ui <- navbarPage("A reproducible Shiny app",
  theme = bs_theme(bootswatch = "yeti"),
  tabPanel("MAIN",
    tags$style('#mytable td {cell-border:0}'),
    mainPanel(DT::dataTableOutput('mytable'))
  )
)    

server <- function(input, output,session) {
  output$mytable = DT::renderDataTable(    
    datatable(mtcars[1:3], style="bootstrap")
  ) 
}

runApp(list(ui = ui, server = server))

Answer 1

您实际上可以使用

bs_theme()

自定义

bs_add_rules()

调用并在其中传递一些 CSS 代码。

编辑：请参阅此 github 问题 和 bslib 文档。

通过使用浏览器上的检查功能并采用纯粹的经验方法，我发现 CSS 属性

border-collapse

就是您正在寻找的属性，并且它与

table.dataTable{}

选择器相关联。描述 CSS 如何工作超出了这个问题的范围，而且我不是专家，所以请随意记录一下这个主题。您确实还可以使用此表的特定选择器（所有其他数据表仍将具有白色边框）和

#mytable dt : {border-collapse: collapse !important;}

这是您的应用程序，没有白色边框：

library(shiny)
library(DT)
library(bslib)

ui <- navbarPage("A reproducible Shiny app",
                         theme = bs_theme(bootswatch = "yeti") |>
# add css rule to override yeti's 'separate' border-collapse default option :  
                   bs_add_rules(".table.dataTable { border-collapse : collapse !important;}"),
                         tabPanel("MAIN",

                                  # not needed anymore : tags$style('#mytable td {cell-border:0}'),
                                  mainPanel(DT::dataTableOutput('mytable'))
                         )
)

server <- function(input, output,session) {
  output$mytable = DT::renderDataTable(    
    datatable(mtcars[1:3], style="bootstrap")
  ) 
}

runApp(list(ui = ui, server = server))

希望这有帮助。