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