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

yh2wf1be  于 2023-06-27  发布在  Bootstrap
关注(0)|答案(1)|浏览(115)

在一个闪亮的应用程序中,我使用bslib库和一个带有bootstrap样式的数据表来应用yeti主题。与使用其他引导样式(例如bootstrap5)或shinythemes库而不是bslib,在datatable中有不需要的白色单元格边界,我没有设法摆脱。
我试着做了一个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))

hwamh0ep

hwamh0ep1#

实际上,您可以使用bs_add_rules()自定义bs_theme()调用,并在其中传递一些CSS代码。
编辑:参见this github issuebslib documentation
通过使用浏览器上的Inspect功能和纯经验方法,我发现CSS属性border-collapse就是您要查找的属性,并且它与table.dataTable{}选择器相关联。描述CSS是如何工作的超出了这个问题的范围,我不是Maven,所以你可以自由地记录自己在这个主题上的工作。实际上,您还可以使用#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))

希望这能帮上忙。

相关问题