列标题未正确对齐答案

【问题标题】：Column headers are not correctly aligned列标题未正确对齐
【发布时间】：2018-01-08 06:19:11
【问题描述】：

考虑一个基本数据表，其代码如下（在此链接上呈现和相同的代码：https://shiny.rstudio.com/gallery/basic-datatable.html）

列标题与表格值不完全一致；标题在值的右侧大约一个字符。

是否有一个设置可以消除标题中的这种空白？参考文档，我注意到 renderDataTable 有一个 options 参数，这可能是 https://datatables.net/reference/option/ 中的选项之一。在此列表中搜索'column'，最佳匹配是columns.contentPadding，但将其从'mmm' 更改为'' 似乎没有任何效果（尽管我可能执行错误）：

options = list(columns.contentPadding = "",  # or contentPadding = ""
                autoWidth = FALSE))

server.R

# Load the ggplot2 package which provides
# the 'mpg' dataset.
library(ggplot2)

function(input, output) {

  # Filter data based on selections
  output$table <- DT::renderDataTable(DT::datatable({
    data <- mpg
    if (input$man != "All") {
      data <- data[data$manufacturer == input$man,]
    }
    if (input$cyl != "All") {
      data <- data[data$cyl == input$cyl,]
    }
    if (input$trans != "All") {
      data <- data[data$trans == input$trans,]
    }
    data
  }))

}

ui.R

# Load the ggplot2 package which provides
# the 'mpg' dataset.
library(ggplot2)

fluidPage(
  titlePanel("Basic DataTable"),

  # Create a new Row in the UI for selectInputs
  fluidRow(
    column(4,
        selectInput("man",
                    "Manufacturer:",
                    c("All",
                      unique(as.character(mpg$manufacturer))))
    ),
    column(4,
        selectInput("trans",
                    "Transmission:",
                    c("All",
                      unique(as.character(mpg$trans))))
    ),
    column(4,
        selectInput("cyl",
                    "Cylinders:",
                    c("All",
                      unique(as.character(mpg$cyl))))
    )
  ),
  # Create a new row for the table.
  fluidRow(
    DT::dataTableOutput("table")
  )
)

【问题讨论】：

标签： r shiny dt

【解决方案1】：

这是一个简单的样式问题。

使用常规数据表样式表，表头有填充10px 18px，而正文单元格有8px 10px。

这些选项无法通过 datatables api 获得。

您唯一的选择是覆盖其中一种单元格类型的样式。这是一个重新定义标题中的填充以匹配正文的添加。（要添加到 ui 定义中的任何位置。）

tags$head(tags$style("
  table.dataTable thead th {
    padding: 8px 10px !important;
  }
"))

【讨论】：