R markdown ioslides - change kable font size with CSS

Question

I'm trying to fit a large table on one slide. I'm using kable. I tried {.smaller} but it's not quite enough so I thought I'd use a .css but it isn't working either.

I created a sample presentation to illustrate the problem. I tried knitting it and it shows up the same way as in my other presentation (which is quite long which is why I excluded it here)

My code:

---
title: "test"
author: "Test Author"
date: "5 Februar 2018"
output: 
  ioslides_presentation:
    test: presentation.css
---

{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
library(knitr)


## Test slide

{r}
table <- data.frame(
  index=1:10,
  long_text=c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)
kable(table)


## Test slide css {.test}

{r}
table <- data.frame(
  index=1:10,
  long_text=c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)
kable(table)

And my .css:

.test{
   font-size: 50%;
}

check this post and put bigger size instead of small https://stackoverflow.com/questions/40840986/knitrkable-is-there-a-way-to-reduce-the-font-size — s.brunel, Feb 05 '18 at 13:39
I tried that and I also tried kableExtra. It works for html output but not for ioslides :( — rhedak, Feb 06 '18 at 08:50
I think I found an answer: adding `td {font-size: 16px !important;}` in the CSS style ... https://stackoverflow.com/questions/9245353/what-does-important-mean-in-css — Ben Bolker, Mar 17 '19 at 23:16
@BenBolker isn't the main/first issue here that the `yaml` header says `test: presentation.css` instead of `css: presentation.css`? — RolandASc, Mar 18 '19 at 12:07
I didn't test this example - I had a similar issue (not even with kable, just with a regular multiline table in markdown -> ioslides), so I didn't try testing it. There's definitely an issue that the `td` characteristics *either* have to be specified as in @technophobe01's answer, or with `!important`; simplify specifying a `td` style doesn't override the rmdtable-specific characteristics ... — Ben Bolker, Mar 18 '19 at 13:46

Technophobe01 · Accepted Answer · 2019-03-18T13:18:23.090

You can do this by modifying the css table and td attributes.

Result:

Example CSS and Code:

presentation.css

table.rmdtable td, table th {
    font-size: 40%;
    padding: 1em 0.5em;
    line-height: 18px;
}

rmarkdownfile

---
title: "test"
author: "Test Author"
date: "5 Februar 2018"
output: 
  ioslides_presentation:
    css: presentation.css
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
library(knitr)
```

## Test slide

```{r}
table <- data.frame(
  index=1:10,
  long_text=c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)
kable(table)
```

## Test slide css {.test}

```{r}
table <- data.frame(
  index=1:10,
  long_text=c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)

kable(table)
```

Explanation

My recommendation is you open the presentation in your browser, for example, chrome. Launch the development tools and play with the css attributes. You can then build this into your presentation .css file.

R markdown ioslides - change kable font size with CSS

1 Answers1

Result:

presentation.css

rmarkdownfile

Explanation

Recommended Reading: