Bootstrap table variant classes lose their fill in HTML

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#15,300 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
75/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
html, sass, scss
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu bằng cách đọc src/resources/formats/html/bootstrap/_bootstrap-rules.scss và các kiểu bảng Bootstrap được issue đề cập. Kiểm tra cách quy tắc background-color: unset tương tác với --bs-table-bg trong các lớp biến thể bảng và hàng. Công việc được xem là hoàn tất khi các ô biến thể có lại màu nền trong cả giao diện sáng lẫn tối, đồng thời bản sửa cho #7566 vẫn cho phép bảng áp dụng kiểu cho các ô của chính nó.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
478
Merge trung bình
17 giờ 53 phút
Pull request đã merge (30 ngày)
135

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.