Alternate row colours from 2nd row of the table using CSS

user_7266012 0
Viewed 2311

I have a table as below. I need to apply alternate colours starting from 2nd row. When I'm using nth-child selector to differentiate odd and even rows, the 1st row is being considered which isn't fulfilling the requirement.

So, how can we write a selector that ignores 1st row and starts applying colours from 2nd row considering 2nd row as odd row?

I know we can apply colour of odd row to even row and vice versa as a work around but some what it is confusing when we look at the code. So, I'm looking for an alternate solution for this table structure below. I appreciate your help. Thanks.

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>
html-table css-selectors css html
5 Answers

You can use :nth-child() selector. Also, if you are using <th> elements, you can put them in a <thead>.

tbody tr:nth-child(2n) {
  background: peachpuff;
}
<table>
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
    </tr>
    <tr>
      <td>51</td>
      <td>52</td>
    </tr>
    <tr>
      <td>61</td>
      <td>62</td>
    </tr>
  </tbody>
</table>

If you don't want to alter your markup, you can start from the 3rd index.

tr:nth-child(2n+3) {
  background: moccasin;
}
<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
    </tr>
    <tr>
      <td>51</td>
      <td>52</td>
    </tr>
    <tr>
      <td>61</td>
      <td>62</td>
    </tr>
  </tbody>
</table>

user_53853810

You can used nth-child() css selector to chose odd and even. Then skip 2nd row by nth-child(2) selector.

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: green}
tr:nth-child(1) {
background:none;}
<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

Another way to achieve is separating <thead> and <tbody>.

tbody tr:nth-child(even) {background: #CCC}
tbody tr:nth-child(odd) {background: green}
<table>
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

user_62850540

Will this work for you. Target first row separatly

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
tr:first-child {
  background-color: yellow;
}
<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

user_11883220

You could use the nth-child() selector in combination with the not() selector.

tr:nth-child(2n + 1):not(:nth-child(1)) {
    background: red;
}
user_83604960 
 table > tbody tr:nth-child(2n+1) > td{
    background-color: #eee;
}
table > tbody > tr:first-child > td{
    background-color: #006c00;
}           
table > tbody > tr:nth-child(2n + 2) > td{
    background-color: #d8e4bc;
}
user_139099590
Related