CODEWITHSUNDEEP
javascriptcss-tables
per_jansson
per_jansson

Reputation: 2189

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?

Upvotes: 5

Views: 6189

Answers (4)

paul
paul

Reputation: 1124

you can simply use jquery and add class for odd rows like 

$("tr:nth-child(odd)").addClass("odd");

and style it using css as 

.odd{background-color:#657383}

Upvotes: 1

Jeff Storey
Jeff Storey

Reputation: 57192

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?

Upvotes: 3

Intelekshual
Intelekshual

Reputation: 7566

You can do this with CSS3.

tr:nth-child(2n+1) /* targets all odd rows */
tr:nth-child(2n) /* targets all even rows */

Upvotes: 2

Peter Smeekens
Peter Smeekens

Reputation: 664

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) { ... }

Upvotes: 10

Related Questions