使用bslib与Bootstrap样式移除DataTable单元格边框问题

你遇到的问题是因为之前的CSS属性写错了，且选择器优先级不足，无法覆盖Yeti主题的默认样式。以下是两种可行的解决方法：

方法一：修正CSS选择器与属性 #

把错误的cell-border属性改成正确的border，同时使用更精确的选择器，必要时用!important强制覆盖主题样式：

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

ui <- navbarPage("A reproducible Shiny app",
  theme = bs_theme(bootswatch = "yeti"),
  tabPanel("MAIN",
    tags$style('#mytable .dataTable td, #mytable .dataTable th {
      border: none !important;
    }'),
    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))

方法二：使用Bootstrap无边框表格类 #

直接给DT表格添加Bootstrap自带的table-borderless类，无需额外写CSS即可去除边框：

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

ui <- navbarPage("A reproducible Shiny app",
  theme = bs_theme(bootswatch = "yeti"),
  tabPanel("MAIN",
    mainPanel(DT::dataTableOutput('mytable'))
  )
)    

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

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

补充说明 #

• 之前的cell-border是无效的CSS属性，正确控制边框的属性是border，设置为none或0均可移除边框。
• Yeti主题的表格样式优先级较高，所以需要用更精确的选择器或!important确保自定义样式生效；而使用Bootstrap原生的table-borderless类是更简洁的方案，能直接复用框架样式。

内容的提问来源于stack exchange，提问作者parterre