nth-child problem

[Harm]

hello, ive got a problem while using nth-child().
the css code:

tr:nth-child(odd) {
background-color: #c5dff1;
}
tr:nth-child(even) {
background-color: #eef6fb;
}
td:nth-child(3n+1) {
text-align: right;
}

the html code:

<table>
 <tr><td colspan="3"><h2>cs.six.lt</h2></td></tr>
 <tr><td width="8%">vieta</td><td width="75%">slapyvardis</td><td width="17%">kills/deaths</td></tr>
 <tr><td>1.</td><td>Harm</td><td>99/1</td></tr>
 <tr><td>2.</td><td>ToXedVirus</td><td>2/99</td></tr>
 <tr><td>3.</td><td>imntz</td><td>1/99</td></tr>
</table>

and.. it just doesnt work. any suggestions?

[edited by: encyclo at 4:45 pm (utc) on July 13, 2007]
[edit reason] no URLs thanks [/edit]

[encyclo]

Welcome to WebmasterWorld Harm.

nth-child()

is a CSS3 selector, and CSS3 has not been officially finalised as a specification yet. The only browser I know that supports it is Konqueror, although I think Opera is planning to add support soon.

It is not, unfortunately, anything that you can rely on working for the next few years.

[Harm]

ah so. okay. well. then the best thing to do is to add a class to every tr item? class="odd/even" right? crazy.

[encyclo]

For the moment, yes - although you only actually need to add a separate class for the alternate rows. Another possibility is to use Javascript to add the "zebra" effect.

[vincevincevince]

Some people get good results by having a background image on the entire table which just happens to tile in such a way that it changes colour each row. If you do this, fix your row height to the pixel with CSS.