I'd like to modify bootstrap ever so slightly so that my striped rows are as such.
Row 1 and row 2 share the same row background colors, row 3 and row 4 share the same background colors, row 5 and row 6 share the same background color as row 1 and row 2. Is there a quick hack/trick of accomplish something of this sort?
This is the code I have so far.
<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>
Use contextual classes to color table rows or individual cells.
table-stripped class is used to create an alternate dark and light rows. Use the combination of table and table-stripped classes within the <table> tag to create a striped table.
The space between two rows in a table can be done using CSS border-spacing and border-collapse property. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of table is collapse or not.
Using pre-defined classes, we can change the color of table cells and table rows. In order to change the color of the table row, we need to specify in <tr> tag with the required class & for changing the color of the table row then specify it inside <td> tag with the required class.
.yourTableClass tr:nth-child(4n+1), .yourTableClass tr:nth-child(4n+2) {
background: pink;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With