Bootstrap table variant classes lose their fill in HTML

Aberta Para iniciantes
  • Algo errado?
#15,300 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
75/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
html, sass, scss
Domínio
frontend

Direção de pesquisa

Comece lendo src/resources/formats/html/bootstrap/_bootstrap-rules.scss e os estilos de tabela do Bootstrap referenciados na issue. Verifique como a regra background-color: unset interage com --bs-table-bg nas classes de variantes de tabela e linha. O trabalho estará concluído quando as células com variantes recuperarem o preenchimento nos temas claro e escuro, e a correção para #7566 continuar permitindo que uma tabela aplique estilos às próprias células.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

bootstrap bug html tables
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

A Bootstrap variant class such as .table-primary or .table-danger no longer colours a table or a row in HTML.
The cells stay transparent, in the light theme and in the dark theme.

The cause is this rule in src/resources/formats/html/bootstrap/_bootstrap-rules.scss, added for #7566:

> :not(caption) > * > * {
  background-color: unset;
  color: unset;
}

Bootstrap paints the variant fill on the cells with background-color: var(--bs-table-bg), so unset removes it.
The ink of the variant still reaches the cells by inheritance, so the text keeps a colour that Bootstrap picked for a fill that is no longer there.
With a theme where that ink is close to the page colour, the text cannot be read.

Steps to reproduce
---
title: "Bootstrap table variants"
format:
  html:
    theme:
      light: cosmo
      dark: darkly
    respect-user-color-scheme: true
---

```{=html}
<table class="table table-primary">
<thead><tr><th>Table</th><th>Class</th></tr></thead>
<tbody><tr><td>Whole table</td><td>table-primary</td></tr></tbody>
</table>

<table class="table">
<thead><tr><th>Row</th><th>Class</th></tr></thead>
<tbody>
<tr class="table-success"><td>One row</td><td>table-success</td></tr>
<tr class="table-danger"><td>One row</td><td>table-danger</td></tr>
<tr><td>Plain row</td><td>none</td></tr>
</tbody>
</table>
```
Actual behavior

Every cell has background-color: rgba(0, 0, 0, 0), in both colour schemes.
The variant rows look like the plain row.

Light Dark
Light scheme: the table-primary table and the table-success and table-danger rows have no fill, like the plain row Dark scheme: the table-primary table and the table-success and table-danger rows have no fill, like the plain row
Expected behavior

The cells of a table or a row with a variant class have the variant fill, as in Bootstrap, while the fix for #7566 still lets a table style its own cells.

Your environment
  • OS: macOS 27.2.
  • Browser: Brave (Chromium).
Quarto check output
Quarto 99.9.9
[✓] Checking environment information...
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.107.1: OK
      Deno version 2.9.8: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 089ba530b3ed4ec156a355d41b6b7de2db3e44ea
Linguagem predominante
JavaScript
Estrelas
6.1k
Forks
478
Merge médio
17h 58min
PRs com merge (30d)
135

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de quarto-dev/quarto-cli

Todas as issues de quarto-dev/quarto-cli

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.