(This is not a CSS question; this is a visual design / user interaction question.)

I have an app that renders multiple rows of data, with several levels of collapsible nesting: nested collapsible rows

I plan to tint the alt rows to make them distinguishable:

alt rows tinted

The problem comes when expanding/collapsing nested rows. As they expand and collapse, like-tinted rows will be adjacent (eg. 1.1 and 1.2 are adjacent and both blue; potentially - 1. and 2. can be adjacent and will both be grey):

rows collapsed with like tints abutting

But if I adhere to a fixed even/odd row colour, like this:

rows collapsed with alt tints

that means that a given row does not maintain a fixed colour (1.2 was blue, now grey; 2. was grey, now blue):

So, as the table is expanded and contracted, many rows are changing tint. Is this visually confusing for the user? Is there a better/best answer for this setup?


1 Answer 1


The alternate coloring doesn't make much sense here. It totally destroys the hierarchy of the list. It would be more usesful if it would highlight your data structure, instead of flattening everything with a line pattern. Eg. use a darker color for the main points (1, 2, 3), a lighter one for the first subnumbering (1.1, 1.2, 1.3) and an even lighter one for the second subnumbering (1.1.1, 1.1.2).

Alternate coloring is more useful for tables with long lines than for lists.

  • Thanks. I've realized my diagram is insufficiently detailed. The rows are quite long - like the whole width of the screen (the column headers are months of years, so it could be 15 columns wide). The purpose of the alt colouring is to facilitate scanning horizontally. But I'll consider your advice in my designs. Commented Oct 20, 2017 at 15:43
  • 2
    @DaveC426913 If like 90% of your data is in the third level, you might want to reduce the alternate coloring to only that third level. Just use the shading in consistence with your data structure.
    – AAGD
    Commented Oct 20, 2017 at 15:52
  • That is an excellent point AAGD - something I should have seen sooner. Third level is the only place there is data - the 2nd and 1st levels are headers only. Excellent solution too. Thank you. Commented Oct 20, 2017 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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