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

user_6703449 0
Viewed 95

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

bootstrap-5 bootstrap-4 twitter-bootstrap
2 Answers

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.

user_192589780

I'm using bootstrap 5.1.3. It seems the rules for .table-striped supersedes the accent color used by .table-active.

both rules try to utilize the sass variable --bs-table-accent-bg

For .table-striped it is:

--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);

For .table-active it is:

--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);

But when you try to combine table-striped and table-active the accent color for striping overrides the accent color for an active row. So I modified the rule in tables.scss to this:

.table-striped {
  > tbody {
    > tr:nth-of-type(#{$table-striped-order}) > * {
      --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
      color: var(--#{$variable-prefix}table-striped-color);
    }

    > tr.table-active:nth-of-type(#{$table-striped-order}) > * {
      --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
      color: var(--#{$variable-prefix}table-active-color);
    }
  }
}

I'm not sure if this is the best approach but it at least limits the rule to striped tables while adhering to the use of the accent variable.

user_19714380
Related