Bootstrap table variant classes lose their fill in HTML

オープン 初心者向け
  • 何か問題がありますか？
#15,300 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
75/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
html, sass, scss
領域
frontend

調査の方向性

まず src/resources/formats/html/bootstrap/_bootstrap-rules.scss と、issue で参照されている Bootstrap のテーブルスタイルを読みます。テーブルと行のバリアントクラスで、background-color: unset ルールが --bs-table-bg とどのように作用するかを確認します。ライトテーマとダークテーマの両方でバリアントセルの塗りつぶしが戻り、#7566 の修正によってテーブルが引き続き自身のセルにスタイルを適用できれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
JavaScript
スター
6.1k
フォーク
478
平均マージ
17時間 53分
マージ済み PR（30日）
135

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

quarto-dev/quarto-cli のほかの issue

quarto-dev/quarto-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。