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:
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])
```
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.
Just output the
<style>
right in the body. This isn't technically valid, but it will work fine in any major browser.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.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
Offset Scroll Anchor in HTML with Bootstrap 4 Fixed Navbar
How to Set CSS Width Equal to Length of Longest Text
Sibling Divs Match Height in Container
Svg "Fill: Url(#....)" Behaving Strangely in Firefox
What Is the Different Between Clearfix Hack and Overflow:Hidden VS Overflow:Auto
Change Font Size in Vuetify Based on Viewport
CSS Percentage Width and Text-Overflow in a Table Cell
Vertical Tabs with Angular Material
Twitter Bootstrap 3 How to Activate Navbar-Collapse on Small Devices
Adding Custom CSS Tags to an Rmarkdown HTML Document
How to Define a Less Mixin to Generate a Transition-Property with a Variable Number of Parameters
Put a Logo on Twitter Bootstrap Navbar Without Resizing the Navbar
CSS - Circle with Margin on Border
Css3 Animation Is Not Working in Ie11 But Works in Other Browsers
Bigger Fonts on Smaller Screens Without @Media Queries or JavaScript