• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Zebra Tables in Internet Explorer

Question

Deanjl    0

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;}

post-85756-1105966295_thumb.jpg

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0
lav-chan    0

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.

Share this post


Link to post
Share on other sites
  • 0
Blinky    0

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

Share this post


Link to post
Share on other sites
  • 0
Deanjl    0
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.