建立一個在Quarto中類似RMarkdown中固定表頭的功能

Question

我一直在嘗試在Quarto中渲染一個來​​自table1 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

需要注意的一件事是，與R-markdown不同，quarto產生的HTML輸出中，無論從程式碼區塊中產生什麼，都會用兩個連續的div包裝起來，這兩個div具有類別名稱cell和cell-output-display。

而類別cell-output-display具有CSS屬性overflow-x#設定為auto，這是表頭的position: sticky不起作用的主要原因（點擊這裡查看原因）。

因此，我們只需要覆寫類別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
)
```

:::

（請注意，我使用了pandoc divs而不是內聯html標籤來定義一個我們將要覆寫該屬性的類別。）

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;
}

---

---