Posts Tagged ‘zebra table’

Easiest way to building zebra tables in css

I found myself stuck with a real strange but interesting thing. I just needed to get the design as in the picture below. If it were only for html page, it would have been indeed a child’s play. But the problem was that it had to be fetched dynamically.
Picture1 :

I tried the best way to learn. Googled it. I tried in forums as well, but the solution came in the form of javascript codes which I am really afraid of. I infact avoid using javascript, for I am not at all comfortable with the codes. Thereafter, there was the css property to my rescue. Its the nth child pseudo class expression property.
The codes go as:

tr:nth-child(2n+1) /* represents every odd row of a html table */
tr:nth-child(odd) /* same */
tr:nth-child(2n) /* represents every even row of a html table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

But the issue was that, this cannot work in IE. A big issue for me.
So at last, I tried php and succeeded.
Here is the code that will get the thing done easily and without any javascript jargon.