R Shiny：使用 `bs_theme()` 时减少 bootstrap table 单元格填充

Question

# Header
## Load packages
library(shiny)
library(tidyverse)
library(DT)
library(bslib)

ui <- navbarPage("Test",
                 inverse = T,
                 collapsible = T,
                 theme = bs_theme(
                   version = 4,
                   bootswatch = "lux",
                   "font-size-base" = "1rem",
                   "table-cell-padding" = ".4rem"
                 ),
                 tabPanel(
                   title = "Data Tables", 
                   id = "data",
                   icon = icon("flask"),
                   fluidRow(
                     dataTableOutput("DT1")
                   )
                   
                 )
                 
)

server <- function(input, output, session) {
  output$DT1 <- renderDataTable({
    datatable(mtcars, 
              style = "bootstrap4",
              options = list(info = F,
                             searching = T,
                             paging = T,
                             autoWidth = T,
                             scrollX = T),
              filter = list(position = 'top', clear = FALSE),
              class = 'cell-border stripe compact',
              rownames = F)
  })
  
}

##
shinyApp(ui, server)

我正在尝试使用 bslib 包中的 bs_theme() 函数创建一个 table，特别是使用主题 lux。 table 非常大，单元格有大量填充。在 bs_theme() 中添加 "table-cell-padding" 参数不会更改单元格大小。如何使 table 紧凑并使 numbers/column 名称周围的单元格紧密？

Answer 1

只需添加tags$style('#DT1 td {padding: 0}')，多么简单。

# Header
## Load packages
library(shiny)
library(tidyverse)
library(DT)
library(bslib)

ui <- navbarPage("Test",
                 inverse = T,
                 collapsible = T,
                 theme = bs_theme(
                     version = 4,
                     bootswatch = "lux",
                     "font-size-base" = "1rem",
                     "table-cell-padding" = ".4rem"
                 ),
                 tabPanel(
                     title = "Data Tables", 
                     id = "data",
                     icon = icon("flask"),
                     fluidRow(
                         tags$style('#DT1 td {padding: 0}'),
                         # style = "width: 50%",
                         dataTableOutput("DT1")
                     )
                     
                 )
                 
)

server <- function(input, output, session) {
    output$DT1 <- renderDataTable({
        datatable(mtcars, 
                  style = "bootstrap4",
                  options = list(info = F,
                                 searching = T,
                                 paging = T,
                                 autoWidth = T,
                                 scrollX = T),
                  filter = list(position = 'top', clear = FALSE),
                  class = 'cell-border stripe compact',
                  rownames = F)
    })
    
}

##
shinyApp(ui, server)

把padding: 0改成你想要的任何有效的css单位，这里我改成0，没有填充。看起来它在左边和右边不起作用，那是因为你有autoWidth，它总是使用父节点的全宽。所以，如果你想让宽度更小，取消注释上面的 style 行，你应该看到不仅仅是屏幕的一半。

R Shiny：使用 `bs_theme()` 时减少 bootstrap table 单元格填充

RShiny: Reducing bootstrap table cell padding when using `bs_theme()`

css

r

datatables

shiny

bootstrap-4