Bootstrap table variant classes lose their fill in HTML

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#15,300 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
75/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
html, sass, scss
Domaine
frontend

Piste de recherche

Commencez par lire src/resources/formats/html/bootstrap/_bootstrap-rules.scss et les styles de tableau Bootstrap référencés dans l’issue. Vérifiez comment la règle background-color: unset interagit avec --bs-table-bg pour les classes de variantes de tableau et de ligne. Le travail est terminé lorsque les cellules avec variantes retrouvent leur remplissage dans les thèmes clairs et sombres, tandis que la correction pour #7566 permet toujours à un tableau d’appliquer ses propres styles à ses cellules.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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
Langage dominant
JavaScript
Étoiles
6.1k
Forks
478
Merge moyen
17 h 58 min
PR mergées (30 j)
135

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de quarto-dev/quarto-cli

Toutes les issues de quarto-dev/quarto-cli

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.