Create a sticky table header in Quarto as in RMarkdown

Question

I have been trying to render a sticky table header from the table1 R package in Quarto as I have been able to successfully do in RMarkdown. However, Quarto doesn't seem to be recognizing my .css file or (more likely) I am missing something.

I am including the CSS file along with both the .rmd and .qmd for reproducibility. I have also included the inline html to create a scrollbox so that the header can stick.

styles.css:

.Rtable1 th {
  border: 0;
  text-align: center;
  padding: 0.5ex 1.5ex;
  margin: 0;
  background-color: #D3D3D3;
    color: black;
  position: sticky;
  top: 0;
  border-top: 2pt solid black;
  border-bottom: 1pt solid black;
}

cars.rmd:

---
title: "Cars"
output: 
  html_document:
    css: styles.css
---

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


```{r}
library(table1)
library(tidyverse)

cars <- mtcars
cars$cars <- rownames(cars)
cars <-
  cars |> 
  mutate(
    gear = factor(gear)
  )
```

<div style="height:450px; width: 500; overflow:auto; border:1.5px solid gray; padding:1.5%">
```{r}
table1::table1(
  ~ cars | gear,
  data = cars
)
```
</div>

cars.qmd:

---
title: Cars
format: 
  html:
    toc: true
    css: styles.css
knitr:
  opts_chunk: 
    echo: false
    message: false
---

```{r}
library(table1)
library(tidyverse)

cars <- mtcars
cars$cars <- rownames(cars)
cars <-
  cars |> 
  mutate(
    gear = factor(gear)
  )
```

<div style="height:450px; width: 500; overflow:auto; border:1.5px solid gray; padding:1.5%">
```{r}
table1::table1(
  ~ cars | gear,
  data = cars
)
```
</div>

This is my first posted question, so I hope I've submitted a good reprex. Thank you for taking the time to read. I hope to get some good advice with this. All the best!

shafee · Answer 1 · 2022-10-10T17:35:28.457

One thing to be careful about quarto generated HTML output, unlike R-markdown, whatever gets generated from a code chunk is wrapped with two consecutive div with classes cell and cell-output-display.

And the class cell-output-display has the CSS property overflow-x set as auto, which is the main reason for position: sticky not working for the table header (See here why).

So to solve it, we just need to overwrite this property for the class cell-output-display.

cars.qmd

---
title: Cars
format: 
  html:
    toc: true
    css: styles.css
knitr:
  opts_chunk: 
    echo: false
    message: false
---

```{r}
library(table1)
library(tidyverse)

cars <- mtcars
cars$cars <- rownames(cars)
cars <-
  cars |> 
  mutate(
    gear = factor(gear)
  )
```

::: {.sticky-table}

```{r}
table1::table1(
  ~ cars | gear,
  data = cars
)
```

:::

(Note that, I have used pandoc divs instead of inline html tag to define a class for which we are going to overwrite that property.)

styles.css


.sticky-table {
  height:450px; 
  width: 500; 
  overflow:auto; 
  border:1.5px solid gray;
  padding:1.5%
}

.sticky-table .cell-output-display {
  overflow-x: unset !important;
}


.Rtable1 th {
  border: 0;
  text-align: center;
  padding: 0.5ex 1.5ex;
  margin: 0;
  background-color: #D3D3D3;
  color: black;
  position: sticky;
  top: 0;
  border-top: 2pt solid black;
  border-bottom: 1pt solid black;
}

Create a sticky table header in Quarto as in RMarkdown

1 Answers1