Blogdown kable tables formatting (ugly)

Question

kable(head(mtcars) %>%
  kable_styling(bootstrap_options = c("striped", "hover"))

A normal R Markdown document, utilizing a kable table (see above), is quite striking and looks like this:

However, when I use the same code chunk in blogdown, the kable table is printed in a more minimalist fashion, which I don't really want. It's just hard to read:

How do I get blogdown to maintain the properties of a normal kable table? I have updated all my packages via update.packages(ask = FALSE, checkBuilt = TRUE) and tinytex::tlmgr_update().

Topper

Answer 1

The appearances of the tables are controlled by the Hugo theme of your blogdown site. If the table styles are missing, you won't get those pretty tables.

Try adding the following CSS code in the CSS file of your blogdown sites.

table {
   margin: auto; 
   border-top: 1px solid #666; 
   border-bottom: 1px solid #666; 
}
table thead th { border-bottom: 1px solid #ddd; }
th, td { padding: 5px; }
tr:nth-child(even) { background: #eee; }

You can read more from the blogdown manual to learn how to custom your blogdown site.

Hako

Is there a way to add a line to get the header row (mpg, cyl, disp, etc.) to highlight with the #eee grey background color as well? Thank you for the answer. – Topper

Yes, the style of header row has a<th> tag, so you could add a line like th {background: #eee;}. source: w3schools.com/html/html_tables.asp – Hako

Answer 2

You can also choose to ask kableExtra to load the bootstrap css for tables for you.

options(kableExtra.html.bsTable = TRUE)

This option is off by default because css might have conflicts between each other. However, in this case, since you have a blank table, which means that there is no table css defined in the HUGO theme selected, it should be fine.

Coed

This is great! Rather than modifying css manually, it helped me stay within both the blogdown and kableExtra frameworks at the same time. This both made my life easier and feels like it will be less error prone in the long run. – Cocksure