R Shiny中DT数据表未占满设定宽度，如何缩小与侧边输入控件间距

修复方案 #

你遇到的两个问题核心是两处错误写法导致的：一是DT外层嵌套了多余的mainPanel（默认固定宽度占父容器的2/3），二是DT未配置宽度适配参数。按以下步骤修改即可：

1. 核心修改点

• 删除DT外层多余的column(12)和mainPanel嵌套
• 给DT::datatable添加width = "100%"参数，同时在options中设置autoWidth = FALSE
• 可通过给左右column添加内边距样式自定义左右区块的间距

2. 修改后完整可运行代码

#### Required Packages
Pckg_to_Inst = c("dashboardthemes", "shiny", "shinythemes",
                 "shinydashboard", "shinyWidgets", "DT", "bslib", "thematic", "shinydashboardPlus", "summaryBox")

##### Defining Negation 
'%not_in%' = Negate('%in%')
for(i in 1:length(Pckg_to_Inst)){
  if(Pckg_to_Inst[i] %not_in% installed.packages()) install.packages(Pckg_to_Inst[i],
                                                                     dependencies = TRUE)
  library(Pckg_to_Inst[i], character.only = TRUE)
}

#######################################################
ui <- fluidPage(
  titlePanel("Dashboard"),
  br(),
  navbarPage("",
             ###### Here : insert shinydashboard dependencies ######
             header = tagList(
               useShinydashboard()
             ),
             #######################################################
             navbarMenu("Data Tracker", icon = icon("database"),
                        tabPanel("Test", fluid = TRUE,
                                 hr(),
                                 fluidRow(
                                   column(12,
                                          uiOutput("summarybox"))
                                 ),
                                 hr(),
                                 fluidRow(
                                   # 左侧DT区块：调整右内边距缩小间距
                                   column(8, style = "padding-right: 5px;",
                                          DT::dataTableOutput("table1", width = "100%")),
                                   # 右侧控件区块：调整左内边距缩小间距
                                   column(4, style = "padding-left: 5px;",
                                          box(
                                            width = 12,
                                            title = "Data Secription - ",
                                            selectInput(inputId = "Data_Type",
                                                        label = "Select Time Frame/Data Type",
                                                        choices = c("A", "B", "C", "D"),
                                                        selected = "A",
                                                        width = "220px"),
                                            background = "black",
                                            "A box with a solid black background"
                                          ))
                                 ))
             ))

server <- function(input, output) {
  output$table1 <- DT::renderDataTable({
    DT::datatable(iris, class = 'cell-border stripe', width = "100%",
                  options = list(
                    initComplete = JS(
                      "function(settings, json) {","$(this.api().table().header()).css({'background-color': 'teal', 'color': 'black'});","}"),
                    scrollX = TRUE,  
                    scrollY = TRUE,
                    pageLength = 5,
                    autoWidth = FALSE), # 关闭自动宽度，强制适配父容器
                  extensions = 'Buttons',
                  selection = 'single',
                  filter = 'top',
    )
  })
}
shinyApp(ui, server)

3. 效果说明

修改后DT会自动占满左侧8列的全部宽度，左右区块的间距可以通过调整column的padding-right和padding-left数值自定义，数值越小间距越窄。

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