Erstellen Sie in Quarto eine Funktion, die dem festen Tabellenkopf in RMarkdown ähnelt

Question

Ich habe versucht, einen Sticky-Table-Header aus dem R-Paket table1 zu rendern, was mir auch in RMarkdown gelungen ist. Allerdings scheint Quarto meine CSS-Datei nicht zu erkennen, oder (wahrscheinlicher) ich übersehe etwas.

Ich habe die CSS-Dateien mit .rmd und .qmd eingefügt, um sie reproduzieren zu können. Ich habe auch Inline-HTML-Code eingefügt, um ein Bildlauffeld zu erstellen, damit der Tabellenkopf fixiert ist.

style.css:

.Rtable1 th {
  Rand: 0;
  Textausrichtung: Mitte;
  Polsterung: 0,5ex 1,5ex;
  Rand: 0;
  Hintergrundfarbe: #D3D3D3;
    Farbe: Schwarz;
  Position: klebrig;
  oben: 0;
  Rand oben: 2pt einfarbig schwarz;
  Rand unten: 1pt einfarbig schwarz;
}

car.rmd:

---
Titel: "Autos"
Ausgabe:
  html_document:
    CSS: Styles.css
---

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


„{r}
Bibliothek(Tabelle1)
Bibliothek(tidyverse)

Autos <- mtcars
car$cars <- rownames(cars)
Autos <-
  Autos |>
  mutieren(
    Gang = Faktor (Gang)
  )
„

<div style="height:450px; width:500; border:1.5px solid grey"
„{r}
Tabelle1::Tabelle1(
  ~ Autos |. Ausrüstung,
  Daten = Autos
)
„
</div>

car.qmd:

---
Titel: Autos
Format:
  html:
    Inhaltsverzeichnis: wahr
    CSS: Styles.css
Stricker:
  opts_chunk:
    Echo: falsch
    Nachricht: falsch
---

„{r}
Bibliothek(Tabelle1)
Bibliothek(tidyverse)

Autos <- mtcars
car$cars <- rownames(cars)
Autos <-
  Autos |>
  mutieren(
    Gang = Faktor (Gang)
  )
„

<div style="height:450px; width:500; border:1.5px solid grey"
„{r}
Tabelle1::Tabelle1(
  ~ Autos |. Ausrüstung,
  Daten = Autos
)
„
</div>

Dies ist die erste Frage, die ich gepostet habe, daher hoffe ich, dass ich einen guten Reprex eingereicht habe. Vielen Dank, dass Sie sich die Zeit zum Lesen genommen haben. Ich hoffe auf einen guten Rat. wünsche dir das Beste!

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

---

---