1

This CSS code

tbody tr:nth-child(even) {
    background:#eee;
}

or this JS+CSS code

$("tr:odd").addClass("odd");

.odd {
   background: #ccc;
}

produce this zebra table effect:

enter image description here

But how does one achieve the following zebra table effect?

enter image description here

Some sample code here: https://jsfiddle.net/61bup2Lr/

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
André Casal
  • 1,012
  • 1
  • 11
  • 25
  • 1
    Possible duplicate of [How to use nth-child for styling with a table with rowspan?](http://stackoverflow.com/questions/10200997/how-to-use-nth-child-for-styling-with-a-table-with-rowspan) – Kristijan Iliev Oct 04 '15 at 18:26
  • This is not a duplicate. That OP has a specific problem: "It's like if I see a rowspan, then I want nth-child to add 1 to n and then continue." Mine is a bit more generic as in some rowspans that would work, but on other it wouldn't, depending on two things: if the rowspan has a even/odd value and it's tr is itself even or odd. – André Casal Oct 04 '15 at 19:26

0 Answers0