DT 0.28版本表格标题位置异常问题求助

我使用DT 0.28版本，调用DT::datatable()时将caption参数设为tagList(h1("Caption"))，但标题未如官方文档2.7节示例那样显示在列标题上方，而是出现在列标题与表格数据行之间，截图如下：

代码示例 #

DT::datatable (
  gps$summary[], extension = "Buttons",
  caption = tagList(h1("Caption")),
  options = list(
    autoWidth = TRUE, buttons = c('csv', 'excel'), dom = 'Bfrtip',
    pagingType = "full_numbers", processing = TRUE, scrollX = TRUE,
    stateSave = TRUE),
  selection = list(mode = current_table_selection(), selected = 1, target = 'row'))
})

解决方法 #

问题根源是HTML<caption>标签的默认样式导致位置偏移，DT处理tagList直接作为caption时，未自动设置顶部显示的样式，手动添加CSS样式即可修正：

方法1：给caption标签添加顶部样式 #

DT::datatable (
  gps$summary[], extension = "Buttons",
  caption = htmltools::tags$caption(
    style = "caption-side: top; text-align: left;",
    htmltools::h1("Caption")
  ),
  options = list(
    autoWidth = TRUE, buttons = c('csv', 'excel'), dom = 'Bfrtip',
    pagingType = "full_numbers", processing = TRUE, scrollX = TRUE,
    stateSave = TRUE),
  selection = list(mode = current_table_selection(), selected = 1, target = 'row')
)

方法2：保留tagList的写法 #

如果想继续使用tagList，只需在外部包裹带样式的caption标签：

caption = htmltools::tags$caption(
  style = "caption-side: top;",
  htmltools::tagList(htmltools::h1("Caption"))
)

设置caption-side: top可以强制标题显示在表格顶部，同时可通过text-align调整标题的对齐方式。

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