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 node in the tree, its children will become hidden, but still count towards the "odd vs even child" selectors. A possibility is to bypass that by writing selectors that count children & parents separately and start the children with the opposite color from its parent, but if you have an even number of children, the last one will be the same color as the next parent.

So, to make things a bit easier to understand:

[Parent - gray stripe]
[child - white]
[child - gray]
[Parent2 - white]

The problem comes where the parents alternate striping -- I want to avoid it so that the children and the parents that follows after it are not the same color stripe.

bottom line, this cannot be solved using css unless we physically add & remove rows, which will require us to change the implementation of the table we are using.

Does anybody know of a better way to solve this issue?

  • Can you use a third color or a knockout for the parent, and only stripe the children? – Lauren-Clear-Monica-Ipsum Dec 31 '13 at 18:13
  • 2
    Don't repost it, but in future code based questions are probably better suited to stackoverflow. Here are a bunch of duplicates. – John Dec 31 '13 at 18:14
  • How is your HTML structured? A JSfiddle would be helpful – JohnB Dec 31 '13 at 18:18
  • This question should be on stack overflow. – Hanna Jan 2 '14 at 17:13

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:

zebra stripes example

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

zebra stripes collapsed

JSFiddle demo

| improve this answer | |

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.

| improve this answer | |
  • This can work but if there are parent/child relationships in the data, the table is going to need some work to be marked up to be properly accessible. I'd suggest not making the parent rows part of a larger table but perhaps headings to individual tables. (But it all depends on the content, of course). – DA01 Jan 2 '14 at 4:55
  • Agreed, that's why I added that the HTML structure will make a difference. – Scott Jan 2 '14 at 7:20

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.