CODEWITHSUNDEEP
csstwitter-bootstrap-3
ZeroZek
ZeroZek

Reputation: 319

Bootstrap table-striped from certain rows

I want to have my table striped starting from 7th row.

This is not working:

.table-striped > tbody > tr:nth-child(7n)

Upvotes: 2

Views: 2413

Answers (2)

Paulie_D
Paulie_D

Reputation: 115099

You need this

.table-striped tbody tr:nth-of-type(2n+7) td {
  background: /* your color here */;
}

Codepen Demo

td {
  border:1px solid grey;
  padding:1em;
}

.table-striped tbody tr:nth-of-type(odd) {
  background:none !important;
}

.table-striped tbody tr:nth-of-type(2n+7) {
  background:lightgrey !important;
}

/* note !important is only used here for demo purposes. */

/* This seesm to be because the CSS is applied in the wrong order in Snippets */

/* See the Codepen Demo for use without !important */
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Aslam
Aslam

Reputation: 9680

You need to use n+7 to do that. 

.table-striped > tbody > tr:nth-child(n+7) td

Upvotes: 2

Related Questions