将引导表的条纹行更改为每隔几行？

Question

我想修改bootstrap如此稍微稍微修改，以至于我的条纹行是如此。

第1行和第2行共享相同的行背景颜色，第3和第4行共享相同的背景颜色，第5行和第6行分享与第1和第2行相同的背景颜色完成此类操作？

这是我到目前为止的代码。

<table class="table table-striped table-sm">
    <thead class="thead-default">
    <tr>
        <td>Column 1</td><td>Column 2</td>
    </tr>
    </thead>
    <tbody>
        <template ngFor let-loop [ngForOf]="model | async">
            <tr>
                <td>Column Data</td><td>Column Data</td>
            </tr>
            <tr>
                <td>Column Data</td><td>Column Data</td>
            </tr>
        </template>
    </tbody>
</table>

Answer 1

.yourTableClass tr:nth-child(4n+1), .yourTableClass tr:nth-child(4n+2) {
 background: pink;
}

Bootstrap 5.3.0

更新

.yourTableClass tr:nth-child(4n+1) td, .yourTableClass tr:nth-child(4n+2) td {
  background: pink;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-sm yourTableClass">
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Answer 2

我不明白您是否想要每个组中的颜色相同或不同的颜色，但是如@MayerSdesign所示，使用nth-child CSS选择器...

.table tbody tr:nth-child(4n+1), .table tbody tr:nth-child(4n+2) {
 background: #aaa;
}
.table tbody tr:nth-child(8n+1), .table tbody tr:nth-child(8n+2) {
 background: #ccc;
}

http://www.codeply.com/go/h1tdredlmr