Rmarkdown ioslides changing table headers

Question

I am trying to create my own table format for tables created using the ioslides_presentation output type of Rmarkdown with Rstudio Version 0.98.1028. Unfortunately I can't change the format of the table headers.

This is the rmd file:

---
title: "I can't change table headers with css"
author: "Blah Blah"
date: "August 27, 2014"
output: ioslides_presentation
css: slidetheme.css
---

## Ugly table

A            B           C
---------   --------    --------  
1           2            4
2           3            5

My css file:

td, th {
  width: 4rem;
  height: 2rem;
  border: 1px solid #ccc;
  text-align: center;
}

td, tr {background:white; background-color:white; color: black;}

th {
  background: black;
  border-color: white;
}
body {
  padding: 1rem;
}

The table divisions respond to the css changes, but the header does not change. I have been back and forth with this, but can't figure out what is going on. Does anyone know how to do this ?

Thanks in advance, Miguel

Answer 1

There are three things you'll need to do:

First, change the YAML header so that the CSS is specified as a property of the ioslides_presentation format, like this:

output_format:
  ioslides_presentation:
    css: slidetheme.css

Second, in CSS the most specific rule wins, and the ioslides CSS (which you don't want to remove) has pretty specific rules for styling tables. If you want to override them you'll need to make your rules even more specific or tag them with !important. It's easiest to use the web inspector to see which rule is winning so you can adjust accordingly--click "Open in Browser" after render, then right-click -> Inspect Element (Chrome).

Finally, since your CSS is combined, you'll need to do more than just add your own style, you'll also need to clear any CSS properties set by ioslides that you don't want applied.