Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Alternate Table Row Color

Today I m going to show you how to alternate table Row color by 2 different Method one includes CSS3 and other jQuery both are pretty simple, so I guess you might wanna know what is all this, you might have seen on many websites or blogs that nowadays in table you see that each row has different color alternately, well some people do it the hard way and some the easy way, today I will show you all the easy way to do it.

So lets gets started with the First Method :

1. Method one CSS3 :

Nowadays you might have seen CSS3 in work its pretty awesome to say because it has taken designing to a new height and have simplified many things, so one of the things is that you can alternate the color of the table row by just adding the below simple code :

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

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

Now what if you only want the color of 4th row to be changed that is also simple with it just take a look at the below code :

tr:nth-child(4) {background-color:#333}

tr:nth-child(4) {background-color:#333}

as you can see the below code will reflect only the fourth row, if you want the to change the row then just instead of 4 in the above code change it to what ever number you want.

Now I guess you are done with CSS3, so now its time for using jQuery

2. Method 2 jQuery :

Well you all guys might be wondering why to use jQuery if the work is already done using CSS3, well that’s true but I have seen some of the browsers still does not support CSS3 for example Microsoft’s Internet Explorer 8. so to make your Table Row with alternate color we are going to use jQuery, because jQuery supports oldest of oldest browser like Internet Explorer 6. well I have found a good jQuery tutorial for you guys to achieve Alternate Table row color here.

Well if you don’t understand the above tutorial or if it is not working for you then just contact me. I will try to solve your issue

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • WhatsApp
  • Email

Related

February 3, 2012 Ritesh Sanap Solutions acuvue 2 colors opaque, Alternate Table, Colors, CSS3, Jquery, Row

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: How to remove category from WordPress URL
Next Next post: How to add Favicon to your WordPress site

Currently Trending

  • How to download Specific parts of YouTube videos
  • How to Change the Welcome/Login Screen in Windows XP ?
  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • Check if your Antivirus Is Working Properly
  • NTFS vs. FAT
  • 110 Amazing Magic Tricks with Everyday Objects - eBook
  • List Of All 255 Keyboard All Alt Key Codes
  • You might also like this Widget for blogger or Related post widget
  • h4x0r ( Hacker ) - Blogger Template
  • How to Make Your Own Avatar

Get Latest post in your Inbox

Random Posts

How to change Blogger Template without deleting widgets ?

March 9, 2009 By Ritesh Sanap Leave a Comment

How to add Favicon to your WordPress site

February 3, 2012 By Ritesh Sanap Leave a Comment

How to watch Hulu outside US

February 19, 2013 By Ritesh Sanap 1 Comment

How to remove Previous and Next entries in thesis

May 21, 2011 By Ritesh Sanap Leave a Comment

How to Copy files from Google Drive to DropBox or Box.net – Mover.io

December 24, 2013 By Ritesh Sanap 1 Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2023 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean