question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug - tr background color for table-active when used with table-striped

See original GitHub issue

In 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.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:2
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
kant2002commented, May 3, 2022

I have no idea why so many .table-active so solve that by applying to my customization file.

.table-striped > tbody > tr.table-active:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--bs-table-active-bg);
}
1reaction
bavococommented, Aug 22, 2021

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found