jquery - 如何解决数据表中闪亮的错位问题？

Question

我在尝试着

• 使数据表中的所有列具有相同的宽度
• 将数据表（标题及其内容）向左对齐
• 达到 mainPanel 宽度后启用水平滚动

但我的数据表会自动以主面板为中心，其标题和内容也未对齐。

例子：

library(shiny)
library(dplyr)
library(DT)

ui <- fluidPage(

   titlePanel("Test Example"), 

   mainPanel(
     width = 10, 
     dataTableOutput("cars.table")
   )
)

server <- function(input, output) {
   output$cars.table <- renderDataTable({
      t(cars[1:10, ]) %>% 
       datatable(class = "compact small", 
                 options = list(columnDefs = list(list(width = "25px", targets = "_all")), scrollX = TRUE, autoWidth = TRUE, 
                                paging = FALSE, ordering = FALSE, searching = FALSE))
   })
}

shinyApp(ui = ui, server = server)

2019/05/03 更新：

我相信这个问题表明这个问题是由 引起的autoWidth = TRUE，但是问题下没有解决方案，如果我们想调整列宽，我们也不能删除autoWidth = TRUE。

标签： jquerycssrdatatableshiny

Answer 1

对于对齐，您可以使用className = dt-left.

而且我猜参数 `fillContainer = T' 完成了滚动的工作。

library(shiny)
library(dplyr)
library(DT)

ui <- fluidPage(

  titlePanel("Test Example"), 

  mainPanel(
    width = 10, 
    dataTableOutput("cars.table")
  )
)

server <- function(input, output) {
  output$cars.table <- renderDataTable({
    t(cars[1:10, ]) %>% 
      datatable(class = "compact small", fillContainer = T, 
                options = list(columnDefs = list(list(className = 'dt-left', width = "25px", targets = "_all")), scrollX = TRUE, 
                               paging = FALSE, ordering = FALSE, searching = FALSE))
  })
}

shinyApp(ui = ui, server = server)