How to adjust the background color of alternating rows of a table?

Question

I was just wondering how to get such a design when everything will be dynamic? I mean, there should be only one class that can be used to get the background color, depending on whether the block is odd or even. I hope my requirements are clear: the background color changes with an odd or even number of lines.

Answer 1

You are looking for alternating lines. This is achieved by adding another class to each other row.

The textbooks have a lot about how to do this.

CSS3 also provides a new way to do this without adding classes:

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

Answer 2

, CSS.

tr:nth-child(2n+1) {YOURSTYLEINHERE}
or
tr:nth-child(odd) {YOURSTYLEINHERE} 

Answer 3

Add a second css class for the striped string. Assuming the default bg color is dark gray, the second class will look like this:

.altRow {background-color: white! important; }

If you do not want to encode the logical server side for applying the second class, you can use the JQuery Odd Selector . But about the same as you, you will end up in striped stripes without the manual application of the second class.

Answer 4

What you want is modular division

if(rowNum % 2 == 0) {class="even"} else {class="odd"}

OR, if you are using CSS3, you can do it like this:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}