ansaurus

Question

Zebra striping a table with hidden rows using CSS3?

Answer 1

+1 A:

Here's as close as you're going to get. Note that you can't make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.

<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) { 
      background-color:  #000;  
 }
#mytable tr:nth-child(even) { 
      background-color:  #FFF;
 }
</style>
<table id="mytable">
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
 </table>

Here are the fixes that I made:

 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }

There's no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you're just adding extra code by adding the table in.

 #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }

Now, [@display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn't a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can't do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it's in the process of doing when it's applying this selector. So, you won't be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we're going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that's all you can do.

 #mytable tr:nth-child(odd) { 
      background-color:  #000;  
 }

And there you have it.

Brian Campbell 2010-09-22 22:20:37

thanks. Since I'm looping through all the rows in the table using prototype and hiding / unhiding based on a filter condition in one of the cells, would it be possible to add a class to all rows that weren't hidden, and to an NTH-CHILD or NTH-OF-TYPE striping based on that class? tr .visible_row:nth-child(odd) ?

Alex C 2010-09-23 03:15:34

or even just:.visible_row:nth-child(odd) { #000; }

Alex C 2010-09-23 03:17:23

@Alex `:nth-child` counts *all* children of the parent element, regardless of whether it matches any preceding selectors. Remember, putting two selectors together with no space in between means to match any elements which match the first *and* match the second. So if the second row is invisible, `.visible_row:nth-child(even)` won't match the second row, and you'll see the first and third rows styled in the odd color, even though the second row is hidden. If that's the effect you're going for, it works, but you probably want the zebra stripes to only apply to visible rows, which is impossible.

Brian Campbell 2010-09-23 04:49:46

In order to make the zebra stripes apply only to visible rows, you'll need to actually remove the invisible ones from the table. If you're using Prototype, you probably want to use `Element.remove()` to remove the elements from the table entirely, and then insert them again later when you need them.

Brian Campbell 2010-09-23 04:53:49

Answer 2

A:

To target the rows using nth-child just use the following:

#mytable tr:nth-child(odd) {background-color: #000; }

David Thomas 2010-09-22 22:23:36

ansaurus

tags:

views:

answers:

Zebra striping a table with hidden rows using CSS3?

related questions