Knitr style table with CSS

Question

I am sure that I am overlooking something obvious, but I want to style my tables produced and kable with custom css.

You can find the gist of my RMD and CSS files here.

My goal was to leverage some of the Table CSS examples that I found here.

When I run my report, my table looks like this:

but from the CSS example above, it should look like the image below.

My question: What am I missing, or is this level of styling not possible with RMarkdown.

My RMD file is also shown below:

---
title: "Test Table CSS"
output: 
  html_document:
    theme: NULL
    style: flat-table.css
---

I want to be able to style my tables with CSS. From the looks of it, I should be able to do that 
through the use of `CSS` and `knitr:kable`.  


```{r setup, echo=FALSE}
data(mtcars)
mt_head = head(mtcars[, 1:5])
```

I want to be able to style my table just like one found [here](http://codepen.io/njessen/pen/naLCv)


```{r echo=FALSE, results='asis'}
library(knitr)
kable(mt_head, "html", table.attr='class="flat-table"')
```

Answer 1

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;
  }

Answer 2

If you only have a small amount of customisation that you want to do, you can consider including the CSS directly within the RMarkdown file. Markdown will pass the CSS directly through provided it is enclosed <style> </style>. Here is a full example:

---
output: html_document
---

# Test Project

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



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

Advanced Formatting

This guide provides lots of useful information on CSS styles for tables. You can achieve some cool things with a few lines of CSS. For example, you can make the row of the table highlight on Hover:

tbody tr:hover {
  background: yellow;
}     

Note that a lot of table styles use some form of JavaScript to get the formatting working, and also may make changes which affect the rest of the document. You are best sticking to the thead and tbody tags.

Answer 3

See custom blocks:

There is a markdown syntax for adding attributes.

::: {#id..class}
```{r showdata}
knitr::kable(yourtable)
```
:::

E.g.

::: {#table .table .table-bordered}
```{r showdata}
knitr::kable(cars)
```
:::