创建一个在Quarto中类似RMarkdown中固定表头的功能
P粉366946380
2023-08-29 17:12:38
<p>我一直在尝试在Quarto中渲染一个来自<code>table1</code> R包的粘性表头，就像我在RMarkdown中成功做到的那样。然而，Quarto似乎无法识别我的.css文件，或者（更有可能的是）我漏掉了一些东西。</p>
<p>我将CSS文件与.rmd和.qmd一起包含，以便能够复现。我还包含了内联的html代码来创建一个滚动框，以使表头固定。</p>
<p>样式.css：</p>
<pre class="brush:php;toolbar:false;">.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;
}</pre>
<p>汽车.rmd：</p>
<pre class="brush:php;toolbar:false;">---
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></pre>
<p>汽车.qmd：</p>
<pre class="brush:php;toolbar:false;">---
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></pre>
<p>这是我发布的第一个问题，所以我希望我提交了一个好的reprex。感谢您花时间阅读。希望能得到一些好的建议。祝一切顺利！</p>
需要注意的一件事是，与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; }