Проблемы с зеброй, разбивающей стол с детьми с помощью CSS

У меня проблема, когда я не могу решить, как лучше всего сделать полосу зебры на моем дереве с помощью css.

Проблема возникает из-за того, что когда вы щелкаете по узлу в дереве, его дочерние элементы становятся скрытыми, но все равно учитываются в селекторах «четных и нечетных дочерних элементов». Можно обойти это, написав селекторы, которые подсчитывают дочерние и родительские элементы отдельно и начинают дочерние элементы с цветом, противоположным родительскому, но если у вас четное количество дочерних элементов, последний будет того же цвета, что и следующий родитель.

Итак, чтобы немного упростить понимание:

[Родительский - серая полоса]
[дочерний - белый]
[дочерний - серый]
[дочерний-белый]
[Родительский2 - белый]

Проблема возникает, когда родители чередуют чередование полос — я хочу избежать этого, чтобы дети и родители, которые следуют за ним, не были одного цвета.

Суть в том, что это нельзя решить с помощью css, если мы физически не добавим и не удалим строки, что потребует от нас изменения реализации таблицы, которую мы используем.

Кто-нибудь знает лучший способ решить эту проблему?

Можете ли вы использовать третий цвет или нокаут для родителя, а только дочерние полоски?
Не публикуйте его повторно, но в будущем вопросы, основанные на коде, вероятно, лучше подходят для stackoverflow . Вот куча дубликатов .
Как устроен ваш HTML? JSfiddle был бы полезен
Этот вопрос должен быть при переполнении стека.

Ответы (3)

Я не знаю, подходит ли вам этот вариант, но я бы изменил стиль, чтобы было ясно, какие строки являются дочерними. Вместо двух цветов для полос зебры я бы использовал четыре. Я бы также использовал вложенные таблицы:

пример полосок зебры

По-прежнему существует четное/нечетное столкновение, но оно все еще читается для меня таким образом. Вот как это будет выглядеть в свернутом виде:

полосы зебры рухнули

Демонстрация JSFiddle

Просто используйте отдельный класс для родительских строк.

С отдельным классом в родительских строках вы можете управлять ими независимо. На мой взгляд, с визуальной точки зрения родительские строки не должны иметь тот же оттенок, что и стандартные дочерние строки. Вот пример:

снимок

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; }

Живая демонстрация здесь

Конечно, если у вас большой стол, он может немного затянуться. В этом случае jquery может быть более подходящим или жестким кодированием в отдельных классах для чередования родительских строк. Многое из того, что возможно, зависит от структуры HTML.

Это может сработать, но если в данных есть отношения родитель/потомок, таблица потребует некоторой работы, чтобы она была правильно доступна. Я бы предложил не делать родительские строки частью большей таблицы, а, возможно, заголовками отдельных таблиц. (Но все зависит от содержания, конечно).
Согласен, поэтому я добавил, что структура HTML будет иметь значение.

Используйте CSS3 и nth-childселектор

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

Больше ссылок здесь или здесь

Проблемы с зеброй, разбивающей стол с детьми с помощью CSS
СпросиСетьПолитика конфиденциальности1y, 0v