Search code examples
reveal.jsquarto

Change size HTML table in Quarto presentation

I would like to use HTML tables in a Quarto presentation. The problem is that they are pretty big on the slides. Here is some reproducible code:

---
title: "Change size of HTML table in Quarto"
format: revealjs
---

## Example slide

| Default | Left | Right | Center |
|---------|------|-------|--------|
| 12      | 12   |    12 |   12   |
| 123     | 123  |   123 |  123   |
| 1       | 1    |     1 |   1    |

Output:

enter image description here

As you can see the table is pretty big. So I was wondering if there is an option by controlling the output size of the table, so the respective distance stay the same?

Solution

  • May be by reducing the font size of the table,

    ---
title: "Change size of HTML table in Quarto"
format: revealjs
engine: knitr
---

## Example slide

```{css}
#| echo: false

.reveal table {
  font-size: smaller;
}

```


| Default | Left | Right | Center |
|---------|------|-------|--------|
| 12      | 12   |    12 |   12   |
| 123     | 123  |   123 |  123   |
| 1       | 1    |     1 |   1    |