P粉2352025732023-08-30 09:29:14
需要注意的一件事是,与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; }