Skip to content

v5.3.0: Table rows can no longer be colored with text-bg-* #38779

@LinqToException

Description

@LinqToException

Prerequisites

Describe the issue

This is (as far as I can tell an undocumented) change from 5.3.0-alpha3 and previous, where this worked, to 5.3.0.

Previously, it was possible to color table rows (and perhaps cells, which I've not used) in a different color using text-bg-*, for example <tr class="text-bg-danger">. I have primarily preferred them over the table-* classes because of the more uniform look with other elements and the stronger, more distinct colors. The documentation does not explicitly state that the text-bg-* or bg-* classes cannot be used on table elements, nor do the table docs mention that you have to use the table-* classes.

When trying to do this now, the row remains default colored, because the rule for .table > :not(caption) > * > * , which sets background-color: var(--bs-table-bg);, takes precedent on the <td>s.

Reduced test cases

<table class="table">
  <thead>
    <tr class="text-bg-primary">
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
</table>

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Firefox, Microsoft Edge

What version of Bootstrap are you using?

v5.3.0

Metadata

Metadata

Labels

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions