CODEWITHSUNDEEP
htmlcsscss-selectorsbackground-colorcss-tables
svdh
svdh

Reputation: 33

Alternate table row color using CSS, individual cells get colored not the even rows

Somehow I can't figure out the following: Alternate table row color using CSS?

If I use the code suggested in the aforementioned topic the even cells get colored (the first, third and fifth. There is a total of 5 cells in a row). It doesn't matter if I use 'even' or 'odd'.

td:nth-child(odd)
{
    background: #f5f6fa;
}

If use the following code, all the rows get colored.: 

tr:nth-child(odd)
  {
        background: #f5f6fa;
  }

Upvotes: 1

Views: 1266

Answers (1)

Jay
Jay

Reputation: 1678

@svdh You've got tags outside of your body and html tags also which in a normal web page wouldn't be rendered. The problem with your HTML is you're setting up loads of tables instead of one with multiple rows. It should be like this.

<table>
 <tr>
  <td>One</td>
  <td>One.</td>
 </tr>
 <tr>
  <td>Two</td>
  <td>Two.</td>
 </tr>
 <tr>
  <td>Three</td>
  <td>Three.</td>
 </tr>
</table>

Fiddle here.. https://jsfiddle.net/fo7Ldfqs/

UPDATED:

If you've got multiple tables and you're trying to color every other one then just use:

table:nth-child(odd){background:#ff0000;}

Fiddle here.. https://jsfiddle.net/4641ph6u/

Upvotes: 1

Related Questions