更改bootstrap的表条纹行是每隔一对行吗?

时间:2017-03-09 17:16:54

标签: css twitter-bootstrap

我想稍微修改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>

2 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分: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