css - kable 表无法在网站上正确呈现

Question

我使用 R 包 blogdown 来管理我的网站。我创建的表在保存和 serve_site 后呈现为标准(？) Markdown 表，即使我使用的是 knitr::kable。但是当我在不同的 RMarkdown 文件中编织 block 时，它会正确呈现。这是代码块。

```{r eda-tab, echo=FALSE}

knitr::kable(matrix(c(
      '7 yrs', '67%',
      '6 yrs', '78%',
      '5 yrs', '86%',
      '4 yrs', '92%',
      NULL
), ncol = 2, byrow=TRUE, dimnames = list(NULL, c('Cutoff', '% Remaining'))),
booktabs=TRUE, caption = 'Inductees')
```

我正在使用 hugo-octopress theme .这可能是主题的问题，但我认为创作者不是 R 用户，所以我不确定如何与他们一起解决这个问题。

Answer 1

knitr::kable() 在用于生成 blogdown 帖子时输出一个 HTML 表格。它看起来“标准”的原因是因为 the CSS styling应用于 hugo-octopress theme 中的表元素非常小:

table,
th,
td
 {
    border: 1px solid black;
    padding: 3px;
}
th {
    font-weight: bold;
    text-align: center;
}

这会生成一个带有黑色单元格边框的简单表格。

要解决此问题，请为文件夹 static/css 中的表格样式创建自定义 .css 文件，比如 static/css/tables.css。然后将 config.toml 中的 CSS overides 行更改为指向 customCSS = ["css/tables.css"]。作为引用，您还可以查看 hugo-octopress documentation on custom CSS ，您可能会觉得有帮助。

您还可以将主题中的 hugo-octopress.css 文件复制到 static/css 并在那里修改表格元素。请注意，除非您覆盖 hugo-octopress 定义的 CSS 属性，否则这些属性也将应用于表格。自定义 CSS 样式在基本主题样式之后添加到 header ，因此添加到 customCSS 的所有文件最后应用。