Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Zebra stripe every two TRs in a row with CSS.

I want to grey/stripe every two rows in a row. Its hard to explain. Here's a picture::
|-^-^-^-^-^-|
|-^-^-^-^-^-|
|-------------|
|-------------|
|-^-^-^-^-^-|
|-^-^-^-^-^-|
|-------------|
|-------------|
|-^-^-^-^-^-|
|-^-^-^-^-^-|
|-------------|
|-------------|

like image 616
Johnston Avatar asked Apr 14 '13 20:04

Johnston


2 Answers

Like this? http://jsfiddle.net/GQNUV/1/

table tr:nth-child(4n-1), table tr:nth-child(4n)  {
    background: #ccc;
}
like image 184
Jaa-c Avatar answered Oct 12 '22 08:10

Jaa-c


Change this to your preference, it should work

tr:nth-child(4n+1) { color: green; }
tr:nth-child(4n+2) { color: green; }
tr:nth-child(4n+3) { color: red; }
tr:nth-child(4n+4) { color: red; }
like image 41
Dincă Alexandru Avatar answered Oct 12 '22 08:10

Dincă Alexandru