kable table 无法在网站上正确呈现

kable table not properly rendering on website

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

```{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 用户,所以我不确定如何与他们一起解决这个问题。

knitr::kable() 在用于生成 blogdown 帖子时输出 HTML table。它看起来 "standard" 的原因是因为 the CSS styling that is applied to the table elements in the hugo-octopress theme 非常小:

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

这导致一个简单的 table 带有黑色单元格边框。

要解决此问题,请在文件夹 static/css 中为 table 样式创建自定义 .css 文件,比如 static/css/tables.css。然后将 config.toml 中 CSS overides 的行更改为指向 customCSS = ["css/tables.css"]。作为参考,您还可以查看 hugo-octopress documentation on custom CSS,这可能对您有所帮助。

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