Problem mit Zebra, das eine Tabelle mit Kindern mit CSS streift

Ich habe ein Problem, bei dem ich mich nicht entscheiden kann, wie ich meinen Baum am besten mit CSS streifen kann.

Das Problem tritt auf, weil, wenn Sie auf einen Knoten im Baum klicken, seine untergeordneten Elemente ausgeblendet werden, aber dennoch zu den Selektoren für „ungerade vs. gerade untergeordnete Elemente“ zählen. Eine Möglichkeit besteht darin, dies zu umgehen, indem Sie Selektoren schreiben, die Kinder und Eltern getrennt zählen und die Kinder mit der entgegengesetzten Farbe ihres Elternteils beginnen, aber wenn Sie eine gerade Anzahl von Kindern haben, hat das letzte die gleiche Farbe wie das nächste Elternteil.

Also, um es etwas verständlicher zu machen:

[Elternteil – grauer Streifen]
[Kind – weiß]
[Kind – grau]
[Kind – weiß]
[Elternteil2 – weiß]

Das Problem tritt auf, wenn die Eltern abwechselnd gestreift sind - ich möchte dies vermeiden, damit die Kinder und die darauf folgenden Eltern nicht die gleiche Streifenfarbe haben.

Unterm Strich kann dies nicht mit CSS gelöst werden, es sei denn, wir fügen physisch Zeilen hinzu und entfernen sie, was erfordert, dass wir die Implementierung der von uns verwendeten Tabelle ändern.

Kennt jemand eine bessere Möglichkeit, dieses Problem zu lösen?

Können Sie eine dritte Farbe oder einen Knockout für die Eltern verwenden und nur die Kinder streifen?
Posten Sie es nicht erneut, aber in Zukunft sind codebasierte Fragen wahrscheinlich besser für stackoverflow geeignet . Hier sind ein paar Duplikate .
Wie ist Ihr HTML aufgebaut? Ein JSfiddle wäre hilfreich
Diese Frage sollte im Stapelüberlauf stehen.

Antworten (3)

Ich weiß nicht, ob dies eine praktikable Option für Sie ist, aber ich würde das Styling so ändern, dass klar ist, welche Zeilen untergeordnete Zeilen sind. Anstelle von zwei Farben für die Zebrastreifen würde ich vier verwenden. Ich würde auch verschachtelte Tabellen verwenden:

Beispiel Zebrastreifen

Es gibt immer noch eine Gerade/Ungerade-Kollision, aber es ist immer noch so für mich lesbar. So würde es zusammengeklappt aussehen:

Zebrastreifen zusammengebrochen

JSFiddle-Demo

Verwenden Sie einfach eine separate Klasse für die übergeordneten Zeilen.

Mit einer separaten Klasse auf übergeordneten Zeilen können Sie dies unabhängig steuern. Vom visuellen Standpunkt aus sollten übergeordnete Zeilen meiner Meinung nach nicht im gleichen Farbton erscheinen wie standardmäßige untergeordnete Zeilen. Hier ist ein Beispiel:

Schnappschuss

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 hier

Natürlich kann es bei einem großen Tisch etwas in die Jahre kommen. In diesem Fall ist jquery möglicherweise besser geeignet oder in separaten Klassen für abwechselnde übergeordnete Zeilen fest codiert. Vieles, was möglich ist, hängt von der HTML-Struktur ab.

Dies kann funktionieren, aber wenn in den Daten Eltern-Kind-Beziehungen vorhanden sind, muss die Tabelle markiert werden, damit sie ordnungsgemäß zugänglich ist. Ich würde vorschlagen, die übergeordneten Zeilen nicht Teil einer größeren Tabelle zu machen, sondern vielleicht Überschriften zu einzelnen Tabellen. (Aber es kommt natürlich auf den Inhalt an).
Einverstanden, deshalb habe ich hinzugefügt, dass die HTML-Struktur einen Unterschied machen wird.

Verwenden Sie CSS3 und den nth-childSelektor

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

Weitere Referenzen hier oder hier

Problem mit Zebra, das eine Tabelle mit Kindern mit CSS streift
AntwortenHierDatenschutz-Bestimmungen1y, 0v