7

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>
1

2 Answers 2

16
.yourTableClass tr:nth-child(4n+1), .yourTableClass tr:nth-child(4n+2) {
 background: pink;
}
2
  • I'm trying to assigne different color every 4 rows, but withoud success. Any idea how to adjust 4n+1 formula? Thanks
    – Andrea
    Nov 2, 2020 at 13:20
  • Maybe I found: .tableclass tr:nth-child(8n+1), .tableclass tr:nth-child(8n+2) , .tableclass tr:nth-child(8n+3), .tableclass tr:nth-child(8n+4) It looks like do what i need, not sure has sense :D
    – Andrea
    Nov 2, 2020 at 13:42
7

I don't understand if you want the same or different colors in each group, but as @mayersdesign showed, use nth-child CSS selectors...

.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

1
  • for me the above code worked perfectly i wanted to alter color every 4 elements: p:nth-child(4n+1), p:nth-child(4n+2), p:nth-child(4n+3), p:nth-child(4n+4) { background: red; } p:nth-child(8n+1), p:nth-child(8n+2), p:nth-child(8n+3), p:nth-child(8n+4) { background: blue; }
    – Ricky Stam
    May 2, 2020 at 12:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.