在R的数据表格（DT）中更改字体大小

Question

一直在尝试修改DT生成的表中所有文本的字体大小。然而，我只能通过使用formatStyle(names(datCalc), fontSize = '12px')来更改记录的大小。列标题和按钮的文本大小相同，使用RStudio中的R Markdown。

- tmesis

---

由于生成的小部件由HTML组成，因此您可以使用CSS。最实用的方法取决于上下文。其中一种选择是通过RMarkdown标题仅包含样式表，并具有足够特定的选择器来按照您的喜好进行样式设置。 - alistaire

Answer 1

我想你差不多已经走到了这里。 我通过明确告诉DT :: formatStyle（）我想要的列来解决了它。 我首先尝试使用您所做的names（）或colnames（）方法。 不知道为什么，这种方法不起作用：

iris %>%
  DT::datatable() %>%
  DT::formatStyle(columns = colnames(.), fontSize = '50%')

然而，我们知道iris数据集有5列，所以我只是这样做：

iris %>%
  DT::datatable() %>%
  DT::formatStyle(columns = c(1, 2, 3, 4, 5), fontSize = '50%')

在这种情况下，我使用font-size = 50%，但您也可以像您所做的那样指定font-size = 12pt。您还可以向columns参数提供逻辑向量，例如c(T, F, F, F, T)，并且格式化将应用于您已经声明为TRUE的列。

- Juan Carlos Villaseñor Derbez

---

colnames(.)无法起作用的原因是管道不返回iris，而是返回DT::datatable()返回的任何内容（即列表）。如果您写colnames(iris)，它就能工作。 - Juergen

这并不真正起作用；它只改变了表格内文本的字体大小，而不是整个表格。 - Nick

Answer 2

通过JavaScript表头调用添加CSS似乎是解决问题的方法（即'this.api().table().header()'）。

datatable(..., options=list(
  initComplete = JS(
        "function(settings, json) {",
        "$(this.api().table().header()).css({'font-size': '50%'});",
        "}")))
  )

引用：第4.3节@https://rstudio.github.io/DT/options.html

- sabeepa

Answer 3

在Antex和sabeepa提供的答案基础上，如果你想更改所有内容的字体大小，包括表格本身外的DT组件，请使用table().container()。所以代码应该像这样：

font.size <- "10pt"

df %>% 
   DT::datatable(
     options=list(
       initComplete = htmlwidgets::JS(
          "function(settings, json) {",
          paste0("$(this.api().table().container()).css({'font-size': '", font.size, "'});"),
          "}")
       ) 
     )

- Vlad

Answer 4

通过使用JS表和列内容的formatStyle，可以通过更改CSS来更改标题和页脚，但是标题和页脚字体大小保持不变。我想一次性更改标题/页脚/正文（整个表格的字体）。这是否可能？

datatable(head(iris, 20), options = list(
  initComplete = JS(
    "function(settings, json) {",
    "$(this.api().table().header()).css({'font-size': '5px', 'background-color': '#c2d1f0', 'color': '#fff'});",
    "}"))) %>%  formatStyle(columns = colnames(.$x$data), `font-size` = '12px')

尝试使用以下命令更新列的CSS，但未成功。

"$(this.api().columns().data()).css({'font-size': '5px'});"

"$(this.api().table().footer()).css({'font-size': '10px});"

"$(this.api().tables().body()).css({'font-size': '10px'});"

- Antex