Skip to content

{gt} Tables not maintaining CSS styling with html table processing. #8624

@RegalPlatypus

Description

@RegalPlatypus

Bug description

After updating to Quarto v1.4.549, table subcaptions are not rendering. gt table formatting is best maintained with the YAML option html-table-processing: none, but when this option is set, subcaptions specified in R chunks with the #| tbl-subcap: do not render. See the example below.

Steps to reproduce

---
title: "Reprex"
author: "John Smith"
date: 2024-02-06
format:
  html:
    toc: true
    toc-location: left
    anchor-selections: false
    fig-cap-location: bottom
    tbl-cap-location: top
    number-sections: true
    smooth-scroll: true
    self-contained: true
    output-file: "reprex.html"
---

```{r}
#| label: setup
#| include: false
knitr::opts_chunk$set(echo = TRUE, dev = "png", cache = FALSE)
```

```{r}
#| label: head
#| message: false
#| warning: false
#| include: false

library(tidyverse)
library(showtext)
library(gt)

font_add_google(name = "Roboto", family = "roboto", regular.wt = 300, bold.wt = 500)
showtext_auto()
```

```{r}
#| label: meat-and-potatoes
#| message: false
#| warning: false
#| include: false

#THEMES###
gt_theme_538 <- function(data,...) {
  data %>%
    opt_table_font(font = list(google_font("Roboto"), "sans-serif")) %>%
    tab_style(
      style = cell_borders(
        sides = "bottom", color = NULL, weight = px(2)
      ),
      locations = cells_body(
        columns = everything(),
        rows = nrow(data$`_data`)
      )
    )  %>% 
    tab_options(
      column_labels.background.color = "white",
      table.border.top.width = px(3),
      table.border.top.color = NULL,
      table.border.bottom.color = NULL,
      table.border.bottom.width = px(3),
      column_labels.border.top.width = px(3),
      column_labels.border.top.color = NULL,
      column_labels.border.bottom.width = px(3),
      column_labels.border.bottom.color = "black",
      data_row.padding = px(3),
      source_notes.font.size = 12,
      table.font.size = pct(100),
      table.font.weight = "300",
      heading.align = "left",
      ...
    ) 
}

my.table <- datasets::iris %>%
  group_by(Species) %>%
  summarise(mean.sepal = mean(Sepal.Length),
            n = n()) %>%
  gt() %>%
  cols_label(mean.sepal = html("Mean Sepal<br />Length (mm)")) %>%
  fmt_number(mean.sepal, decimals = 1) %>%
  gt_theme_538()

```

# Double Tables

```{r}
#| label: tbl-one
#| tbl-cap: With html-output-processing, normal gt output.
#| tbl-subcap: 
#| - Blah1
#| - Blah2
#| tbl-cap-location: top
#| layout-ncol: 2
#| echo: false
#| message: false
#| warning: false

my.table
my.table
```
<br>

```{r}
#| label: tbl-two
#| tbl-cap: Without html-table-processing, normal gt output.
#| tbl-subcap: 
#| - Blah1
#| - Blah2
#| tbl-cap-location: top
#| html-table-processing: none
#| layout-ncol: 2
#| echo: false
#| message: false
#| warning: false

my.table
my.table
```
<br>

```{r}
#| label: tbl-three
#| tbl-cap: With html-table-processing, gt as_raw_html().
#| tbl-subcap: 
#| - Blah1
#| - Blah2
#| tbl-cap-location: top
#| layout-ncol: 2
#| echo: false
#| message: false
#| warning: false

my.table %>% as_raw_html()
my.table %>% as_raw_html()
```
<br>

```{r}
#| label: tbl-four
#| tbl-cap: Without html-table-processing, gt as_raw_html().
#| tbl-subcap: 
#| - Blah1
#| - Blah2
#| tbl-cap-location: top
#| html-table-processing: none
#| layout-ncol: 2
#| echo: false
#| message: false
#| warning: false

my.table %>% as_raw_html()
my.table %>% as_raw_html()
```

# Single Tables

```{r}
#| label: tbl-five
#| tbl-cap: With html-output-processing, normal gt output.
#| tbl-cap-location: top
#| layout-ncol: 1
#| echo: false
#| message: false
#| warning: false

my.table
```
<br>

```{r}
#| label: tbl-six
#| tbl-cap: Without html-table-processing, normal gt output.
#| tbl-cap-location: top
#| html-table-processing: none
#| layout-ncol: 1
#| echo: false
#| message: false
#| warning: false

my.table
```
<br>

```{r}
#| label: tbl-seven
#| tbl-cap: With html-table-processing, gt as_raw_html().
#| tbl-cap-location: top
#| layout-ncol: 1
#| echo: false
#| message: false
#| warning: false

my.table %>% as_raw_html()
```
<br>

```{r}
#| label: tbl-eight
#| tbl-cap: Without html-table-processing, gt as_raw_html().
#| tbl-cap-location: top
#| html-table-processing: none
#| layout-ncol: 1
#| echo: false
#| message: false
#| warning: false

my.table %>% as_raw_html()
```

Expected behavior

All double tables, layout-ncol: 2, should have subcaptions. All single tables should be center-aligned.

Actual behavior

  • Double tables, layout-ncol: 2, do not render subcaptions when html-table-processing: none.
  • Conversely, gt tables lose their formatting and single tables justify right without html-table-processing: none specification.

Your environment

No response

Quarto check output

Quarto 1.4.549
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.549
      Path: C:\Users\AaronBrown\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: v2023.08
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\AaronBrown\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2023

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.3.1
      Path: C:/PROGRA~1/R/R-43~1.1
      LibPaths:
        - C:/Users/AaronBrown/AppData/Local/R/win-library/4.3
        - C:/Program Files/R/R-4.3.1/library
      knitr: 1.45
      rmarkdown: 2.25

[>] Checking Knitr engine render......OK

Metadata

Metadata

Assignees

No one assigned

    Labels

    tablesIssues with Tables including the gt integration

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions