Conditional alternative table row styles in HTML5

Question

Is there any changes regarding this questions Conditional alternative table row styles since HTML5 came in?

Here is a copy of original question:

Is it possible to style alternate table rows without defining classes on alternate tags?

With the following table, can CSS define alternate row styles WITHOUT having to give the alternate rows the class "row1/row2"? row1 can be default, so row2 is the issue.

  <style>
  .altTable td { }
  .altTable .row2 td { background-color: #EEE; }
  </style>

  <table class="altTable">
   <thead><tr><td></td></tr></thead>
   <tbody>
    <tr><td></td></tr>
    <tr class="row2"><td></td></tr>
    <tr><td></td></tr>
    <tr class="row2"><td></td></tr>
   </tbody>
  </table>

Alan · Accepted Answer · 2010-12-31 01:51:38Z

5

CSS3 supports the "nth-child" property on the tr tag. Something like the following should work:

tr:nth-child(odd)  { background-color: white; }
tr:nth-child(even) { background-color: green; }

answered Dec 31, 2010 at 1:51

Alan

3,9151 gold badge31 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:47:49Z

0

Jacob R's solution to your original posting still applies.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Dec 31, 2010 at 1:54

borkweb

1,0248 silver badges7 bronze badges

2 Comments

Budda Over a year ago

But author told: "Does not work in IE"..? Do you mean it is ok?

borkweb Over a year ago

It still doesn't work in IE, sadly. For IE, you will have to continue with the alternating classes or use JS to add the striping in.

Collectives™ on Stack Overflow

Conditional alternative table row styles in HTML5

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related