Zebra Tables in Internet Explorer

[Deanjl]

I'm trying to make a webpage that relies heavily on tables to present data, as opposed to presentation to which they're normally delegated. To make things easier I'm using zebra tables (alternative colors ? la iTunes) and instead of the tedious manual way (in the first example) I tried using an alternate way (second example). There's a third Javascript way, but I'd like to stay away from it for now. Anyway, this is what the infamous Internet Explorer displays . . .

Oh yeah, this is just a heads-up to anyone out there intending to use tables the same way.

HTML:
<table>
<tr class="ts"><td>Code</td><td>Description</td></tr>
<tr class="er"><td>air_density #</td><td>Changes the air density</td></tr>
<tr class="or"><td>sv_bounce #</td><td>Sets bounce multiplier for physically simulated objects collision</td></tr>
<tr class="er"><td>sv_cheats #</td><td>Activate cheats with '1' or deactivate cheats with '0'</td></tr>
</table>

Stylesheet:
.er {background:#F5F4E9;}
.or {background:#FFFFFF;}

HTML:
<table>
<tr class="ts"><td>Code</td><td>Description</td></tr>
<tr><td>air_density #</td><td>Changes the air density</td></tr>
<tr><td>sv_bounce #</td><td>Sets bounce multiplier for physically simulated objects collision</td></tr>
<tr><td>sv_cheats #</td><td>Activate cheats with '1' or deactivate cheats with '0'</td></tr>
</table>

Stylesheet:
tr+tr {background:#F5F4E9;}
tr+tr+tr {background:#FFFFFF;}
tr+tr+tr+tr {background:#F5F4E9;}
tr+tr+tr+tr+tr {background:#FFFFFF;}

[lav-chan]

I don't believe Internet Explorer's CSS support is good enough to use selectors like that, so you're probably going to have to do it the 'tedious' way, which works fine in all browsers... and isn't really that tedious. :/

If you want, you can just have it default to white and then you'll only have to set the classes for rows that AREN'T white. That would eliminate almost half of your typing, i guess.

[Blinky]

Its because your trying to use the child selector that IE doesn't understand. Take a look at :

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

Should have a solution for ya ;) Although it does use quite a bit of JS, its the only real way of doing it, unless you want to start using php and calling your data from a database.

CSS3 does include a selector that will allow you todo this, but seeming as IE doesn't fully support CSS2 I wouldn't pin your hopes on that fixing the problem anytime soon :p

[Deanjl]

I don't believe Internet Explorer's CSS support is good enough to use selectors like that, so you're probably going to have to do it the 'tedious' way, which works fine in all browsers... and isn't really that tedious. :/

If you want, you can just have it default to white and then you'll only have to set the classes for rows that AREN'T white. That would eliminate almost half of your typing, i guess.

585308423[/snapback]

When you try to add new rows using the tedious method you have to reassign all of the classes for the following rows that are disrupted.

The background color of the table is grey and the cells are seperated by 1 pixel horizontally to get the same effect as iTunes. Just seems stupid to cater for a browser that doesn't support the standards of the Internet.

Its because your trying to use the child selector that IE doesn't understand. Take a look at :

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

585308553[/snapback]

Thanks, but I've been through that site, in fact that's where I originally got the idea. Great articles in there though. I don't know any Javascript and I'm a bit hesitant to add anything I'm unsure of into a webpage.