首页  >  问答  >  正文

创建一个在Quarto中类似RMarkdown中固定表头的功能

<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>
P粉366946380P粉366946380438 天前593

全部回复(1)我来回复

  • P粉235202573

    P粉2352025732023-08-30 09:29:14

    需要注意的一件事是,与R-markdown不同,quarto生成的HTML输出中,无论从代码块中生成什么,都会用两个连续的div包装起来,这两个div具有类名cellcell-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;
    }


    回复
    0
  • 取消回复