: Trouble zebra striping a table with children with CSS I have a problem where I can't decide how best to zebra stripe my tree with css. The problem arises because when you click on a

@Ravi4787994

I don't know if this is a viable option for you, but I would alter the styling so that it's clear which rows are children. Instead of two colors for the zebra striping, I would use four. I would also use nested tables:



There is still a even/odd collision, but it's still readable to me this way. Here is how it would look collapsed:



JSFiddle demo

Vote Up Vote Down

@Pierce403

Use CSS3 and the nth-child selector

tr:nth-child(odd) { background-color:#fff; }
tr:nth-child(even) { background-color:#ccc; }


More reference here or here

Vote Up Vote Down

@Turnbaugh909

Simply use a separate class for the parent rows.

With a separate class on parent rows you can control then independently. From a visual standpoint, parent rows should not appear the same shade as standard child rows in my opinion. Here's an example:



table { width: 80%; margin: 40px;}
td { padding: 6px 10px; }
tr.parent:nth-of-type(2n+1) { background:#a00; }
tr.parent:nth-of-type(3n+0) { background:#00a; }
tr.parent:nth-of-type(3n+1) { background:#a00; }
tr:nth-child(odd) { background:#fff; }
tr:nth-child(even) { background:#eee; }


Live Demo here

Of course, it can get a bit long into the tooth if your table is large. In that instance jquery may be a better fit or hard coding in separate classes for alternating parent rows. A great deal of what is possible depends upon the HTML structure.

Vote Up Vote Down