Blog from Saravanan Arumugam

Let us talk about Technologies

Color alternate rows with different color


Most of us prefer to show a table element with alternate rows showing different background colors.

There has been multiple solutions in the history to do that.

One old way is to apply alternate classes to rows and apply different styles to them. Then ASP.Net form’s grids had property settings for achieving that. There’s a javascript way etc.

I am posting here two simpler and newer ways to do it.

 

Using CSS3

With CSS 3 doing this is way simple.

tr:nth-child(odd)
{
    background-color: #eee;
}

Simple isn’t it.

 

For the older browsers like IE8, IE7 etc. this may not work. For them, we can use jQuery to do it.

$(“tr:odd”).css(“background-color”, “#eee”);

The code above can do the trick for us.

Advertisements

4 responses to “Color alternate rows with different color

  1. Terese March 1, 2013 at 9:14 am

    Hello! Do you know if they make any plugins to protect against
    hackers? I’m kinda paranoid about losing everything I’ve worked hard on.
    Any suggestions?

  2. www.austinplanetarium.org March 3, 2013 at 2:55 pm

    Does your blog have a contact page? I’m having problems locating it but, I’d
    like to send you an e-mail. I’ve got some suggestions for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it expand over time.

  3. Anonymous June 24, 2013 at 5:28 pm

    Pretty nice post. I just stumbled upon your blog and wished to say that
    I have really enjoyed surfing around your blog posts.
    After all I will be subscribing to your feed and I hope you write again very soon!

  4. Anonymous July 1, 2013 at 4:55 pm

    Excellent web site you’ve got here.. It’s hard to find good
    quality writing like yours nowadays. I really appreciate individuals like you!
    Take care!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: