像在 RMarkdown 中一样在 Quarto 中创建粘性表格标题

Question

我一直在尝试从table1Quarto 中的 R 包渲染粘性表头，就像我在 RMarkdown 中成功做到的那样。但是，Quarto 似乎无法识别我的 .css 文件，或者（更有可能）我丢失了某些内容。

为了重现性，我将 CSS 文件与 .rmd 和 .qmd 一起包含在内。我还包含了内联 html 来创建一个滚动框，以便标题可以粘贴。

样式.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;
}

汽车.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>

汽车.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>

这是我第一个发布的问题，所以我希望我已经提交了一个好的reprex。感谢您抽出时间阅读。我希望能得到一些好的建议。一切顺利！

Answer 1

关于 quarto 生成的 HTML 输出需要注意的一件事是，与 R-markdown 不同，从代码块生成的任何内容都用两个带有类cell和 的连续 div 包装cell-output-display。

并且该类的cell-output-displayCSS 属性overflow-x设置为，这是表头不起作用的auto主要原因（请参阅此处原因）。position: sticky

因此，为了解决这个问题，我们只需要覆盖该类的这个属性即可cell-output-display。

汽车.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
)
```

:::

（请注意，我使用pandoc div而不是内联 html 标签来定义我们将覆盖该属性的类。）

样式.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;
}