Knitr Style Table with CSS

Knitr style table with CSS

If you take your .Rmd file and the modified CSS file below, you can obtain your desired result with:

knitr::knit2html('my-report.RMD', stylesheet = 'flat-table.css')

Here's the result:
Sample Image

Here is an updated flat-table.css:

.flat-table {
display: block;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
overflow: auto;
width: auto;
}
th {
background-color: rgb(112, 196, 105);
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
td {
background-color: rgb(238, 238, 238);
color: rgb(111, 111, 111);
padding: 20px 30px;
}

Is there a way to use knitr's css class options when using kable tables?

Add the class bg-success to the table thru the table.attr argument:

knitr::kable(head(iris), table.attr = "class=\'bg-success\'") %>% 
kableExtra::kable_styling()

I realized that you need to modify the style of HTML table, passing class/argument to kable_styling function.

Apparently, there is no need to specify format argument:

knitr::kable(head(iris), table.attr = "class=\'bg-success\'", format = "html") %>% 
kableExtra::kable_styling()

Also, you need to include library(kableExtra) to {r setup}.

You may find more info about table.attr argument at section 13.1.11 Customize HTML tables

knitr: exporting to html file but keeping style

The typical way of doing this is to put the code inside a rmarkdown document. It will handle everything for you.

The only case you need to use the save_kable function kableExtra is that you have lots of tables and you want to save them as fragments. In that case, you can use

library(kableExtra)
cars %>%
kable() %>%
kable_styling() %>%
save_kable()

Changing the style of one table in Rmarkdown with kable

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>

How to specify table stripe colors for knitr::kable?

The styles of kable tables are controlled by CSS file. tbody can be used to change the colour of the content of the table, with thead able to change the header.

As shown by Lee S, you can create an external CSS file. However, you can also include the CSS directly within the R Markdown file, as markdown accepts raw HTML and passes it through unaltered. See here for some more details

Here is a full reproducible example:

---
output: html_document
---

# Test Project

<style>
tbody tr:nth-child(odd){
background-color: #F7FBFF;
}
</style>

```{r}
knitr::kable(mtcars[1:5, 1:5])
```

Sample Image

This guide provides a good explanation of the table elements which can be controlled by CSS.

How to produce HTML tables and accompanying CSS using R Markdown or HTML Sweave?

I can think of three ways without messing with your toolchain, all of them are kind of hacky.

  1. Just output the <style> right in the body. This isn't technically valid, but it will work fine in any major browser.

  2. Emit JavaScript that creates a <style> block at runtime and appends it to the head (here's one way). This will look a little gross in the HTML source and in the R code, but it will work and it will validate.

  3. Use a scoped style block. This would be exactly what you are looking for, except that the scope attribute is new to HTML5 and not yet implemented in any major browser. However, if you base your styles on uniquely generated IDs (i.e. your rules are written such that even if they apply to the whole document they won't mess anything up), I imagine the browsers will just ignore the "scoped" attribute and everything will work properly--then this becomes effectively a version of option 1 that happens to validate!

(I would go with #3, personally.)

If you haven't already, it'd be worth starting a thread at the RStudio support forum about this; even though it's not strictly an RStudio issue, we're obviously doing a lot of work on the end-to-end scenario of publishing reports in R Markdown and would love to find out more about your specific examples. Tables are clearly going to be a big part of what people do with this reports and we know this is a weak spot right now, one that we do want to address in future versions.



Related Topics



Leave a reply



Submit