user2554330
user2554330

Reputation: 44997

Changing the style of one table in Rmarkdown with kable

I'm writing a vignette using knitr and rmarkdown, choosing the rmarkdown::html_vignette style. Most of my tables are entered as markdown pipe-tables, but I use kable() for one.

Generally I like the default style of the tables, but in one particular table (out of several) I would like to suppress the odd-even line shading of the lines.

Is there a simple way to overrule the CSS

table thead, table tr.even {
  background-color: #f7f7f7;
}

just for one particular table, generated by kable?

Here's a sample file, with the shading on both tables. I only want it on one:

---
output: rmarkdown::html_vignette
---

This table should have alternate shading:
```{r output="asis"}
library(knitr)
kable(matrix(1:20, nrow=5))
```

How do I turn it off for just this one?
```{r output="asis"}
kable(matrix(1:20, nrow=5))
```

Upvotes: 3

Views: 2186

Answers (1)

user2554330
user2554330

Reputation: 44997

Here's a partial answer to the question. It's ugly; I hope someone else contributes a better one.

One solution is to define a new style for a particular CSS id or class, then wrap the desired table in <DIV id="newid"> </DIV> or <DIV class="newclass"> </DIV>. As far as I can tell, there's no way to do this in the call to kable(), so it needs to be put directly into the text.

It appears that the style itself needs to be put into the text as well, in a <STYLE></STYLE> block. Though the header allows you to specify css, as far as I can tell that can only replace the existing style file, you can't add to it.

So here is my ugly solution:

---
output: 
  rmarkdown::html_vignette
---

This table should have alternate shading:
```{r output="asis"}
library(knitr)
kable(matrix(1:20, nrow=5))
```

Define a style for class "nostripes", then wrap tables in a DIV with 
class "nostripes" to turn it off:


<style>
.nostripes tr.even {background-color: white;}
</style>
<div class="nostripes">
```{r output="asis"}
kable(matrix(1:20, nrow=5))
```
</div>

Upvotes: 3

Related Questions