quarto-dev / quarto-dev/quarto-cli

tables are opaque white instead of transparent with some column layouts

Open
#8,491 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug tables themes
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

I first discovered this with bslib::value_box() but it seems more generalizable to divs with background colors that have HTML tables in them (this doesn't seem to impact markdown tables). With the default .column-body the cells of the table are translucent, but with other layouts the table has an opaque white background. Without html-table-processing: none all the tables appear white and grey striped.

Screenshot 2024-01-29 at 10 52 13 AM
Steps to reproduce
---
format:
  html:
    html-table-processing: none
---

```{r}
tb <- shiny::markdown(knitr::kable(data.frame(x = c("A", "B", "C"), y = 1:3, z = rnorm(3)), format = "pipe"))
```


::: {.column-body style="background-color: blue;"}
```{r}
#| echo: false
#| layout-ncol: 5
tb;tb;tb;tb;tb
```
:::

::: {.column-body-outset-left style="background-color: blue;"}
```{r}
#| echo: false
#| layout-ncol: 5
tb;tb;tb;tb;tb
```
:::

::: {.column-body-outset-right style="background-color: blue;"}
```{r}
#| echo: false
#| layout-ncol: 5
tb;tb;tb;tb;tb
```
:::

## What about regular markdown tables?

::: {.column-body style="background-color: blue;"}
|x  |  y|          z|
|:--|--:|----------:|
|A  |  1| -0.7668372|
|B  |  2| -1.2611264|
|C  |  3| -1.2509172|
:::

::: {.column-body-outset-left style="background-color: blue;"}
|x  |  y|          z|
|:--|--:|----------:|
|A  |  1| -0.7668372|
|B  |  2| -1.2611264|
|C  |  3| -1.2509172|
:::

::: {.column-body-outset-right style="background-color: blue;"}
|x  |  y|          z|
|:--|--:|----------:|
|A  |  1| -0.7668372|
|B  |  2| -1.2611264|
|C  |  3| -1.2509172|
:::


Expected behavior

I would expect the color of the tables to be consistent. I'd assume that maybe html-table-processing: none should produce tables with no background color (transparent).

Actual behavior

Different behavior depending on column layout

Your environment
  • IDE: Rstudio 2023.12.0+369
  • OS: macOS 14.2.1
Quarto check output
Quarto 1.4.506
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.9: 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.506
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/ericscott/Library/TinyTeX/bin/universal-darwin
      Version: 2023

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

[✓] Checking Python 3 installation....OK
      Version: 3.10.9 (Conda)
      Path: /usr/local/Caskroom/miniconda/base/bin/python
      Jupyter: 5.3.0
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.3.1
      Path: /Library/Frameworks/R.framework/Versions/4.3-x86_64/Resources
      LibPaths:
        - /Users/ericscott/Library/R/x86_64/4.3/library
        - /Library/Frameworks/R.framework/Versions/4.3-x86_64/Resources/library
      knitr: 1.45
      rmarkdown: 2.25

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Use the supplied .qmd reproduction as the entry point and render it with html-table-processing: none. Inspect the generated HTML and CSS for the column-body, column-body-outset-left, and column-body-outset-right layouts; done means table backgrounds are transparent and consistent across those layouts.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.