CODEWITHSUNDEEP
csstwitter-bootstrap
gh0st
gh0st

Reputation: 1714

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>

Upvotes: 9

Views: 10112

Answers (2)

mayersdesign
mayersdesign

Reputation: 5310

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

Update for 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>

Upvotes: 20

Carol Skelly
Carol Skelly

Reputation: 362430

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

Upvotes: 8

Related Questions