Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Different CSS style on odd and even rows

Is it possible, using only CSS, to set different styles on odd and even rows for a dynamically generated table without myself setting correct style on each row when I iterate the collection?

like image 925
per_jansson Avatar asked Feb 23 '11 20:02

per_jansson


3 Answers

I'm not sure this will work cross-browser, i'd prefer jQuery myself, but css-only this should do the trick:

tr:nth-child(even) { ... }
tr:nth-child(odd) { ... }
like image 63
Peter Smeekens Avatar answered Sep 27 '22 21:09

Peter Smeekens


You can use the nth-child selector http://reference.sitepoint.com/css/pseudoclass-nthchild, though it is not supported by all browsers.

You can also use jquery as described What is the best way to style alternating rows in a table?

like image 44
Jeff Storey Avatar answered Sep 27 '22 22:09

Jeff Storey


You can do this with CSS3.

tr:nth-child(2n+1) /* targets all odd rows */
tr:nth-child(2n) /* targets all even rows */
like image 38
Intelekshual Avatar answered Sep 27 '22 22:09

Intelekshual