Bug - tr background color for table-active when used with table-striped
See original GitHub issueIn version 5.0.0, the table-active
class, when applied to a tr
, is superseded by a table-striped
class on the table.
As can be seen in the codepen below, the first row background color is still var(--bs-table-striped-bg)
, instead of var(--bs-table-active-bg)
The same is not happening when table-active
class is applied to a td
.
This issue is not present in version 4.6.0.
- Operating system and version (Windows, macOS, Android, iOS): Windows
- Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser): Edge
- A reduced test case or suggested fix using CodePen or JS Bin: https://codepen.io/tridnguyen/pen/WNpvdPy
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Bootstrap table striped: How do I change the ... - Stack Overflow
In custom.css .table-striped>tr:nth-child(odd){ background-color:red; } ... This is written using LESS CSS, and keys all colors off the base color.
Read more >Bootstrap table design examples with different class - Plus2net
Bootstrap tables with different classes. ... .table-striped, Striped rows ( alternate colors) ... .table, Different Background colors for rows & cells.
Read more >How To Create A Zebra Striped Table - W3Schools
To create a zebra-striped table, use the nth-child() selector and add a background-color to all even (or odd) table rows: ...
Read more >Making a responsive table using CSS - HubSpot Community
So I want to make it responsive using CSS. ... .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, ...
Read more >Tables - Bootstrap
Using the most basic table markup, here's how .table -based tables look ... Use .table-striped to add zebra-striping to any table row within...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I have no idea why so many
.table-active
so solve that by applying to my customization file.Although it’s not an elegant solution, this could be solved by increasing the specificity of .table-active.
Changing it to
.table-active.table-active.table-active, .table-active.table-active.table-active > * { ... }
makes it have a higher specificity than the .table-striped selector.