Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alter bootstrap's table striped Rows to be every other couple rows?

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>
like image 504
gh0st Avatar asked Mar 09 '17 17:03

gh0st


People also ask

Which bootstrap class will provide different colors to alternate rows in a table?

Use contextual classes to color table rows or individual cells.

What is table striped?

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.

How do you put a space between two rows in bootstrap 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.

How do I change the background color of a table in bootstrap?

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.


1 Answers

.yourTableClass tr:nth-child(4n+1), .yourTableClass tr:nth-child(4n+2) {
 background: pink;
}
like image 122
mayersdesign Avatar answered Nov 15 '22 08:11

mayersdesign