Table-striped overwrites table-active

[Alex-t-rorich]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Having a Striped table makes it so only every even element that is table-active shows the active colour.

Reduced test cases

https://codepen.io/alex-t-rorich/pen/MWPOxQP

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

Windows

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

Chrome, Firefox

What version of Bootstrap are you using?

5.3

[ZeinebGuellouz]

The issue with table-striped overwriting table-active in Bootstrap can be resolved by increasing the specificity of the CSS selector for the table-active class.
One way to do this is to add a parent selector to the table-active class, which will make it more specific than the table-striped class. For example, you can add a class to the parent element of the table, and use that class as a selector for the table-active class.
Here is an example CSS code that shows how this can be done:

.my-table .table-active {
background-color: #f5c6cb;
}
In this code, .my-table is a parent class that is added to the parent element of the table. This makes the selector more specific than the .table-striped class, so the background color of the table-active elements will not be overwritten by the striping.
You can adjust the background-color value to the desired color for your active table rows.
By using a more specific selector, you can ensure that the active color is applied to every table row that has the table-active class, regardless of whether the table is striped or not.
I can take this issue to fix it
Hope i could help

[louismaximepiton]

Hey there, thanks a lot for your contributions.

I think the issue raised here is related to #37084 and it should be already resolved on main. So the solution might be done in v5.3.0 of Bootstrap. To try it yourself, try using https://main--twbs-bootstrap.netlify.app/docs/5.3/dist/css/bootstrap.min.css as CSS source in your Codepen.

I'm closing the issue with the comment but fill free to reopen if I missunderstood the issue here.