How to alternate table row colors

Just had to share a snippit. I have been trying to alternate row colors globally and haven’t had luck in IE with this bit of CSS

tr:nth-child(even) {
    background-color: #ccc;
}

It doesn’t work in most IE browsers and then I found this bit of jQuery and it seems to work like a charm!

$(document).ready(function()
{
  $("tr:even").css("background-color", "#ccc");
});

[button link=”http://www.losmedanos.edu/directory/” color=”orange”] Check it out[/button]

 

5 thoughts on “How to alternate table row colors

  • June 21, 2012 at 2:54 am
    Permalink

    so would the following in your css do the same? I ask because it seems to me the jQuery one above was just declaring the same thing, so I am curious if you tried that

    tr:even {
    background-color: #ccc;
    }

  • June 21, 2012 at 8:29 pm
    Permalink

    It is declaring the same thing but the CSS doesn’t work on any of the version of IE – not even 8 but the jquery version does.

  • June 21, 2012 at 8:38 pm
    Permalink

    I meant does this work:
    tr:even {
    background-color: #ccc;
    }

    instead of:
    tr:nth-child(even) {
    background-color: #ccc;
    }

    I am just trying to figure out what the jQuery is doing different.

  • June 21, 2012 at 11:31 pm
    Permalink

    Yes I did try that and I see what you are saying in that it seems like the same thing but IE seemed to ignore it. In my example I should have had it the same but I think IE tends to ignore the CSS here but for some reason doesn’t ignore the jQuery wrapper.

  • June 21, 2012 at 11:44 pm
    Permalink

    Interesting, and very good to know, thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *