CODEWITHSUNDEEP
cssrknitrr-markdown
Btibert3
Btibert3

Reputation: 40126

Knitr style table with CSS

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:

enter image description here

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

enter image description here

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"')
```

Upvotes: 27

Views: 10570

Answers (3)

nikarko01
nikarko01

Reputation: 1

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)
```
:::

Upvotes: 0

Michael Harper
Michael Harper

Reputation: 15369

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])
```

enter image description here

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

enter image description here

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.

Upvotes: 1

Thomas
Thomas

Reputation: 44527

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: enter image description here

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

Upvotes: 31

Related Questions