如何覆盖引导表行背景颜色

Question

我有一个动态生成的表格，某些行应该具有自定义背景颜色。

<table class="table table-striped">
 <tbody>
  <tr class="bg-coral">...</tr>
  <tr class="bg-coral">...</tr>
  <tr>...</tr>
 </tbody>
</table>

我也想使用

table-striped

类，以防万一没有彩色行，备用默认颜色会让它看起来不错。

但是，正如您所看到的，虽然第一行有自定义类，但它没有着色。我认为引导程序

table-striped

奇数行类就是原因。

尝试写这个，但没有运气：

 .bg-coral{
    background-color: coral;
  }

.table-striped tbody tr.bg-coral, 
.table-striped tbody tr.bg-coral:nth-of-type(odd) {
    background-color: coral;
}

您可以在这里检查问题：
https://jsfiddle.net/6kv3b47q/

我可以编写什么 css 类，以确保所有具有

<tr>

类的

bg-coral

都具有背景颜色。

Answer 1

我想这就是你正在寻找的

.table-striped tbody tr:nth-of-type(odd) {
    background-color: coral!important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
 <tbody>
  <tr>
    <td>hello</td>
   </tr>
  <tr>
    <td>hiii</td>
   </tr>
 <tr>
    <td>hello</td>
   </tr>
  <tr>
    <td>hiii</td>
   </tr>
 </tbody>
</table>

Answer 2

您可以根据自己的选择粘贴并更改颜色。应该可以完美解决

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-bg-type: #f6f5fa !important;
}