Bootstrap .table-active无法与. table-striped一起使用

7rtdyuoh  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(140)

我有一个.table-striped表,我想突出显示其中的一些行。为此我使用了.table-active类。但它只在50%的情况下有效--只有当“白色条纹”突出显示时。
如何突出显示没有自定义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 版本5.1.3

htrmnn0y

htrmnn0y1#

您可以通过在table-active样式中设置sass变量来解决此问题:

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

这在Bootstrap 5.1.3和Chrome中都能实现。

rur96b6h

rur96b6h2#

我使用的是bootstrap 5.1.3。.table-striped的规则似乎取代了.table-active使用的强调色。
两个规则都尝试使用sass变量--bs-table-accent-bg
对于.table-striped,它是:

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

对于.table-active,它是:

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

但是,当您尝试合并table-stripedtable-active时,用于条带化的强调颜色会覆盖活动行的强调颜色。

.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);
    }
  }
}

我不确定这是否是最好的方法,但它至少将规则限制为条带表,同时坚持使用accent变量。

相关问题