Is it possible in CSS3 to ignore a TR if it has no TD children?

Discussion in 'CSS' started by Wildhoney, May 13, 2011.

0
  1. #1
    I have the following HTML code:

    <tr><th>Header</th><tr>
<tr><td>Cell</td></tr>
    Code (markup):
    And I'm using CSS3 to select the alternate row headers using the nth-child pseudo-class. However, sometimes my table has the <tr><th> row, and sometimes it doesn't, but I still want to begin the <th><td> with the odd row.

    My problem is that since it goes: odd, even, odd, even, if the TH is present then the TD will get the even class.

    In pseudo code I want something like:

    
var beginOn = table.hasChild('th') ? 'even' : 'odd';
    Code (markup):
     
    Wildhoney, May 13, 2011 IP
  2. Wildhoney

    Wildhoney Active Member

    Messages:
    192
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #2
    Actually, I've probably answered my own question, so I'll post the solution. Technically speaking you're supposed to have the <thead> and <tbody> nodes designating the header and body of the table, so if you're sticking to the standards, then to achieve the aformentioned, it would simply be a case of:

    
table tbody tr:nth-child(even)
    Code (markup):
    Since that would jump straight to the tbody section, leaving the thead section well alone.
     
    Wildhoney, May 13, 2011 IP