Alternating <TR> styles in tables 2

[donmerlin]

When I saw the first-child pseudo class, I thought for sure there would be an odd-child and even-child class (to allow me to color band my HTML tables). Alas, no such beast exists as far as I can tell. I'm looking for a CSS shortcut or trick for taking a generic table and making every other row a different background color. In the past, I just used HTML to change the colors of every other row manually, but this is a major headache when you continually add and delete rows (because then you have to re-adjust all the other rows). I'm currently using the following CSS hack, but it has two problems, which is why I'm looking for a new solution. The first problem is that it's a finite definition (aka, once the table goes beyond the definition, the colors are not applied). The 2nd problem is that it's a nasty looking hack. I'd be interested in knowing if anyone else has done something like this in a more elegant way.

Thanks!

table tr:first-child+tr, tr:first-child+tr+tr+tr, tr:first-child+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr, tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr
{
color: blue;
background-color: rgb(222,222,222);
}

 

[Vragabond]

There is an odd and even child selector in css. In css3 and probably not widely or at all supported, but it is there. But since even :first-child is not widely supported, you must be using this for a closed audience.

For CSS3 odd and even reference, see this:

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#structural-pseudos

For zebra stripes on tables using best client side method available today, see:

http://www.alistapart.com/articles/zebratables/

 

[ChrisHunt]

I bodged together a little Javascript to do this recently. You can see it at

http://www.infolinx.org/js/stripeme.js

. Call it when the page has been loaded, and it applies an "even" class to every other <tr>. You can use CSS to style it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[donmerlin]

I post this in the middle of the night, head into the shower, and before I go to bed I find two excellent answers that already solve the issue! This is just too awesome for words! Good to know odd and even are coming (as soon as CSS3 is more common), and even better to see examples of how to use Javascript to do what I need to do now. Thanks so much!

 

[donmerlin]

The sample of stripe provided on alistapart.com was great because it included the HTML, CSS and Javascript.

Chris, do you have any HTML that shows how to effectively use your javascript routine?

 

[ChrisHunt]

This page isn't really for public consumption, so I'll break the link, but stick a

http://www on

the front of: infolinx.org/api/getres.shtml

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[donmerlin]

Thanks! I see the definition in the CSS for 'even'.

What's interesting is that I couldn't see any reference to the originally posted javascript, not imbedded in the HTML, or any tag to include it from an external file. Yet the page correctly stripes the table, so it must be somewhere. How did you manage to hide the reference to the javascript? (or am I in need of some eye glasses?)

 

[Vragabond]

The script tags are right at the bottom of the page, before the closing body tag. Script just executes, there's no function call.

 

[donmerlin]

Ah. That's my Pascal brain expecting all function definitions to be *before* actual use. I could have easily found that with a search, but I was so convinced that it was supposed to be at the top. Thanks for pointing me in the right direction.