我有一个.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
2条答案
按热度按时间htrmnn0y1#
您可以通过在
table-active
样式中设置sass变量来解决此问题:这在Bootstrap 5.1.3和Chrome中都能实现。
rur96b6h2#
我使用的是bootstrap 5.1.3。
.table-striped
的规则似乎取代了.table-active
使用的强调色。两个规则都尝试使用sass变量
--bs-table-accent-bg
对于
.table-striped
,它是:对于
.table-active
,它是:但是,当您尝试合并
table-striped
和table-active
时,用于条带化的强调颜色会覆盖活动行的强调颜色。我不确定这是否是最好的方法,但它至少将规则限制为条带表,同时坚持使用accent变量。