quarto-dev / quarto-dev/quarto-cli
tables are opaque white instead of transparent with some column layouts
Nobody has claimed this yet.
- 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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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