Create a function in Quarto similar to fixed table header in RMarkdown

Question

I've been trying to render a sticky table header from the table1R package in Quarto, like I successfully do in RMarkdown. However, Quarto doesn't seem to recognize my .css file, or (more likely) I'm missing something. I included the CSS files with the .rmd and .qmd to be able to reproduce. I've also included inline html code to create a scroll box so that the table header is fixed. Style.css: .Rtable1th{border:0;text-align:cent

P粉235202573 · Answer

One thing to note is that unlike R-markdown, in the HTML output generated by quarto, whatever is generated from the code block is wrapped with two consecutive divs that have the class namecell and cell-output-display.

And the class cell-output-display has the CSS attribute overflow-x set to auto, which is the position of the header: stickyThe main reason why it doesn't work (Click here to see the reason).

Therefore, we only need to override this attribute of class cell-output-display to solve the problem.

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 used pandoc divs instead of inline html tags to define a class where we will override this 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;
}