.table-active doesn't work together with .table-stripped

Question

I have a .table-striped table and I want to highligth some rows in it. For that I'm using .table-active class. But it works only in 50% of cases - only when 'white stripe' is hightlighted.

How can I highlight rows without custom css ?

<table class="table table-striped table-rounded table-sm">
    <tbody>
    <tr>
        <td>This is not 'active'</td>
    </tr>
    <tr class="table-active">
        <td>This is 'active' because it is white stripe originally</td>
    </tr>
    <tr class="table-active">
        <td>This should be 'active', but it is not! It have stripped color</td>
    </tr>
    <tr>
        <td>This is not 'active'</td>
    </tr>
    </tbody>
</table>

Bootstrap version 5.1.3

Answer 1

You can work around this issue by setting the sass variables in the table-active style:

.table-active {
    --bs-table-striped-bg: var(--bs-table-active-bg);
    --bs-table-striped-color: var(--bs-table-active-color);
}

This works out in Bootstrap 5.1.3 and with Chrome.