Créez une fonction dans Quarto similaire à l'en-tête de tableau fixe dans RMarkdown

Question

J'ai essayé de restituer un en-tête de tableau collant à partir du package R table1 dans Quarto, comme je le fais avec succès dans RMarkdown. Cependant, Quarto ne semble pas reconnaître mon fichier .css ou (plus probablement) il me manque quelque chose.

J'ai inclus les fichiers CSS avec les .rmd et .qmd pour pouvoir les reproduire. J'ai également inclus du code HTML en ligne pour créer une zone de défilement afin que l'en-tête du tableau soit corrigé.

style.css :

.Rtable1 th {
  bordure : 0 ;
  alignement du texte : centre ;
  rembourrage : 0,5ex 1,5ex ;
  marge : 0 ;
  couleur d'arrière-plan : #D3D3D3 ;
    la couleur noire;
  position : collante ;
  haut : 0 ;
  bordure supérieure : 2 points noir uni ;
  bordure inférieure : 1 pt noir uni ;
}</pré>
<p>car.rmd:</p>
<pre class="brush:php;toolbar:false;">---
titre : "Voitures"
sortir:
  document_html :
    css : styles.css
---

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


```{r}
bibliothèque (table1)
bibliothèque (tidyverse)

voitures &Lt ;- mtcars
voitures$voitures <- noms de lignes(voitures)
voitures <-
  voitures |>
  subir une mutation(
    engrenage = facteur (engrenage)
  )
```

<div style="hauteur : 450 px largeur : 500 ; débordement : auto ; bordure : 1,5 px remplissage : 1,5 % » ;
```{r}
table1::table1(
  ~ équipements de voitures |
  données = voitures
)
```
</div>

car.qmd:

---
titre : Voitures
format:
  HTML :
    toc : vrai
    css : styles.css
tricoteur :
  opts_chunk :
    écho : faux
    message : faux
---

```{r}
bibliothèque (table1)
bibliothèque (tidyverse)

voitures &Lt ;- mtcars
voitures$voitures <- noms de lignes(voitures)
voitures <-
  voitures |>
  subir une mutation(
    engrenage = facteur (engrenage)
  )
```

<div style="hauteur : 450 px largeur : 500 ; débordement : auto ; bordure : 1,5 px remplissage : 1,5 % » ;
```{r}
table1::table1(
  ~ équipements de voitures |
  données = voitures
)
```
</div>

C'est la première question que j'ai postée, j'espère donc avoir soumis un bon reprex. Merci d'avoir pris le temps de lire. J'espère avoir de bons conseils. je souhaite tout le meilleur!

Answer 1

Une chose à noter est que contrairement à R-markdown, dans la sortie HTML générée par quarto, tout ce qui est généré à partir du bloc de code est enveloppé avec deux divs consécutifs portant le nom de classe cell和cell-output-display.

La principale raison pour laquelle les cours cell-output-display具有CSS属性overflow-x设置为auto，这是表头的position: sticky ne fonctionnent pas (Cliquez ici pour voir pourquoi ).

Il nous suffit donc de remplacer cette propriété de la classe cell-output-display pour résoudre le problème.

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
)
```

:::

(Notez que j'ai utilisé pandoc divs au lieu de balises html en ligne pour définir une classe dans laquelle nous remplacerons cette propriété.)

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

---

---