Bootstrap table variant classes lose their fill in HTML

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,300 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
75/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
html, sass, scss
Bereich
frontend

Rechercherichtung

Beginne damit, src/resources/formats/html/bootstrap/_bootstrap-rules.scss und die in der Issue referenzierten Bootstrap-Tabellenstile zu lesen. Prüfe, wie die Regel background-color: unset mit --bs-table-bg bei Tabellen- und Zeilenvariantenklassen zusammenwirkt. Das Ziel ist erreicht, wenn Zellen mit Varianten in hellen und dunklen Themes wieder ihre Füllung erhalten und die Korrektur für #7566 weiterhin ermöglicht, dass eine Tabelle ihre eigenen Zellen gestaltet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
478
Ø Merge
17 Std. 58 Min.
Gemergte PRs (30 T.)
135

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.