Group zebra striping in a dynamic table

Question

My question is kind of related with this other one but with a big difference: the zebra striping of my table does not depend on the odd or even rows, but on the grouping of them.

Now, the table won't be static. New rows can be added, removed or just hidden when performing a live search/filter, for example.

The problem arises when for example, in a filter by the word house, the table will end up placing the same color groups together and hiding the rest, like this:

Making it impossible for the user to differenciate between one or another group of rows.

What solution would you recommend in this case? Dynamically changing the color of the rows doesn't seem like an easy solution (or even a desired one, as rows might be appearing or disappearing on every type in the search box)

Answer 1

I'd recommend getting rid of zebra striping. It's often considered chart junk more than it's considered helpful.

If you need to group rows, do it with a visual divider line:

---------------

apples       12

bananas      47

oranges      16

---------------

sausage      3

hamburger    72

---------------

ketchup      7

mustard      9

---------------

buns         3

---------------

With that solution, you can remove individual rows or even entire groupings but still retain the visible groups.

Answer 2

You could add a simple border to the bottom of the last row in any given grouping. That way, even if the colors match between groups, there will still be a definitive marker between them.