kable 表无法在网站上正确呈现答案

【问题标题】：kable table not properly rendering on websitekable 表无法在网站上正确呈现
【发布时间】：2018-08-29 13:20:18
【问题描述】：

我使用 R 包 blogdown 来管理我的网站。我创建的表在保存和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 用户，所以我不确定如何与他们一起解决。

【问题讨论】：

标签： css r r-markdown blogdown

【解决方案1】：

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

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 覆盖行更改为指向customCSS = ["css/tables.css"]。作为参考，您还可以查看hugo-octopress documentation on custom CSS，这可能对您有所帮助。

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

【讨论】：