R shiny datatable scrollX 影響表格寬度

Question

請使用以下示例來顯示我的 R shiny 應用程序面臨的布局問題。 示例應該是完全可重現的：

ui <- dashboardPage(  
  title = "Dashboard test",  # this is the name of the tab in Chrome browserr
  dashboardHeader(title = "Web Portal"),
  
  dashboardSidebar(   
    sidebarMenu(

      menuItem('Retail', tabName = "retail", icon = icon("th"),
               menuItem('Dashboard', tabName = 'retail_dashboard'))
    )
  ),

  dashboardBody( 
      tabItem(tabName = "retail_dashboard",
              tabsetPanel(type = "tabs",
                          tabPanel("Dashboard",
                                   h3("Test."),
                                   
                                   fluidRow(column(3,
                                                   dataTableOutput("table_test1", width = '100%')),
                                            column(3,
                                                   dataTableOutput("table_test2", width = '100%'))
                                            )
                                     )
                                  )
              )
              )
)


server <- function(input, output, session) {    
  
  output$table_test1 <- renderDataTable({
    df <- data.frame(BUCKET=c("1","2"), ITEM=c(48,53), VALUE = c(7.88, 5.12), stringsAsFactors = F)
    datatable(df, 
              rownames= F,
              #colnames = colnames_var,
              filter = 'none',
              extensions = 'Buttons', 
              caption = NULL,
              options = list(scrollX = T
                             #, headerCallback = js_col_header   # this is to show/hide column headers
                             , lengthChange = T
                             #, pagingType = "numbers"  # this hides the Next and Previous buttons -->  https://datatables.net/reference/option/pagingType
                             , paging = T    # this completely hides  the Next, Previous and Page number at the bottom of the table
                             , autoWidth = T
                             , pageLength = 5 # this determines how many rows we want to see per page
                             , dom = 'Blfrtip'
                             , buttons = NULL
                             , info = T #  this will hide the "Showing 1 of 2..." at the bottom of the table -->  https://stackoverflow.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
                             , searching = T  # this removes the search box  ->  https://stackoverflow.com/questions/35624413/remove-search-option-but-leave-search-columns-option
                             , ordering = F # https://stackoverflow.com/questions/54318475/hide-the-column-names-in-dtdatatable    useful especially when we want to hide column names
              ))
  })
  
  output$table_test2 <- renderDataTable({
    df <- data.frame(BUCKET=c("1","2"), ITEM=c(48,53), VALUE = c(7.88, 5.12), stringsAsFactors = F)
    datatable(df, 
              rownames= F,
              #colnames = colnames_var,
              filter = 'none',
              extensions = 'Buttons', 
              caption = NULL,
              options = list(scrollX = F
                             #, headerCallback = js_col_header   # this is to show/hide column headers
                             , lengthChange = T
                             #, pagingType = "numbers"  # this hides the Next and Previous buttons -->  https://datatables.net/reference/option/pagingType
                             , paging = T    # this completely hides  the Next, Previous and Page number at the bottom of the table
                             , autoWidth = T
                             , pageLength = 5 # this determines how many rows we want to see per page
                             , dom = 'Blfrtip'
                             , buttons = NULL
                             , info = T #  this will hide the "Showing 1 of 2..." at the bottom of the table -->  https://stackoverflow.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
                             , searching = T  # this removes the search box  ->  https://stackoverflow.com/questions/35624413/remove-search-option-but-leave-search-columns-option
                             , ordering = F # https://stackoverflow.com/questions/54318475/hide-the-column-names-in-dtdatatable    useful especially when we want to hide column names
              ))
  })
}

cat("\nLaunching   'shinyApp' ....")
shinyApp(ui, server)

問題 1：如果我在大屏幕上打開這個應用程序，table_test2 會很好地占據屏幕的所有預期空間，完全在 3 列內。 然而，table_test1 沒有（見我的截圖）。 主要區別在於 table_test1 具有 scrollX =T，而 table_test2 具有 scrollX =F。 我怎樣才能保持 scrollX = T 和可視化 table_test1 的方式與可視化 table_test2 的方式相同（意思是，沒有空白的邊空間）？ （見所附屏幕截圖中的紅色）

問題2：table_test1的alignment怎么有點亂，列名沒有和表列對齊？ （見附件截圖中的藍色）

更改 scrollX 不是一個選項，因為某些用戶的屏幕較小，並且 scrollX =F 表不會在某些用戶的顯示器上正確顯示。 謝謝

Answer 1

從數據表datatable取出autoWidth選項

datatable(
  data       = df,
  rownames   = FALSE,
  filter     = "none",
  extensions = "Buttons",
  caption    = NULL,
  options    = list(
    scrollX      = TRUE,
    lengthChange = TRUE,
    paging       = TRUE,
    pageLength   = 5,
    dom          = "Blfrtip",
    buttons      = NULL,
    info         = TRUE,
    searching    = TRUE,
    ordering     = FALSE 
  )
)