Cipta fungsi dalam Quarto serupa dengan pengepala jadual tetap dalam RMarkdown

Question

Saya telah cuba memaparkan pengepala jadual melekit daripada pakej table1 dalam Quarto, seperti yang saya berjaya lakukan dalam RMarkdown. Walau bagaimanapun, Quarto nampaknya tidak mengenali fail .css saya, atau (kemungkinan besar) saya kehilangan sesuatu.

Saya menyertakan fail CSS dengan .rmd dan .qmd untuk dapat menghasilkan semula. Saya juga telah memasukkan kod html sebaris untuk membuat kotak skrol supaya pengepala jadual ditetapkan.

style.css:

.Rtable1 th {
  sempadan: 0;
  text-align: tengah;
  padding: 0.5ex 1.5ex;
  margin: 0;
  warna latar belakang: #D3D3D3;
    warna: hitam;
  kedudukan: melekit;
  atas: 0;
  atas sempadan: hitam pepejal 2pt;
  sempadan-bawah: 1pt hitam pepejal;
}

kereta.rmd:

---
tajuk: "Kereta"
pengeluaran:
  html_document:
    css: styles.css
---

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


```{r}
perpustakaan(jadual1)
perpustakaan(kemas)

kereta <- mtcars
kereta$kereta <- nama baris(kereta)
kereta <-
  kereta |>
  bermutasi(
    gear = faktor (gear)
  )
```

<div style="tinggi:450px lebar: 500 limpahan:auto;
```{r}
jadual1::jadual1(
  ~ kereta |.
  data = kereta
)
```
</div>

car.qmd:

---
tajuk: Kereta
format:
  html:
    toc: benar
    css: styles.css
mengait:
  opts_chunk:
    gema: palsu
    mesej: palsu
---

```{r}
perpustakaan(jadual1)
perpustakaan(kemas)

kereta <- mtcars
kereta$kereta <- nama baris(kereta)
kereta <-
  kereta |>
  bermutasi(
    gear = faktor (gear)
  )
```

<div style="tinggi:450px lebar: 500 limpahan:auto;
```{r}
jadual1::jadual1(
  ~ kereta |.
  data = kereta
)
```
</div>

Ini ialah soalan pertama yang saya siarkan, jadi saya harap saya menyerahkan semula yang baik. Terima kasih kerana meluangkan masa membaca. Semoga mendapat nasihat yang baik. doakan yang terbaik!

Answer 1

Satu perkara yang perlu diambil perhatian ialah tidak seperti R-markdown, dalam output HTML yang dijana oleh quarto, apa sahaja yang dijana daripada blok kod dibalut dengan dua div berturut-turut yang mempunyai nama kelas cell和cell-output-display.

Sebab utama kelas cell-output-display具有CSS属性overflow-x设置为auto，这是表头的position: sticky tidak berfungsi (Klik di sini untuk mengetahui sebabnya ).

Jadi, kita hanya perlu mengatasi sifat kelas ini cell-output-display untuk menyelesaikan masalah.

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

:::

(Perhatikan bahawa saya menggunakan pandoc divs dan bukannya teg html sebaris untuk menentukan kelas di mana kami akan mengatasi sifat ini.)

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

---

---