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