Table row - Giving alternate colors

Question

In HTML, I am adding rows dynamically in a table I need to give different colors for alternative rows using CSS How can I acheive this?

Answer 1

To achieve this effect (known as zebra striping) in all browsers using just CSS you'll need to add a class to each row (e.g. odd and even) and give them different colours.

If you want to achieve this with just CSS and are not concerned with supporting older browsers (IE6-8) you should use the CSS3 nth-child pseudo element. This can achieve the required effect without the extra class mark-up, e.g.

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

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

However if you want full browser support and don't mind using javascript there are a number of scripts available, both jQuery plugins and plain old javascript. Maybe try this for starters?

http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

Answer 2

Just create 2 css classes, and assign them to the tags alternately.