Ich habe eine einfache Tabellenstruktur
%Vor%Ich kann einfach CSS hinzufügen:
%Vor% Das Problem ist, wenn Sie auf eine dieser übergeordneten <tr> -Zeilen klicken, wird es erweitert und fügt eine zusätzliche <tr> -Detailzeile wie unten hinzu:
Gibt es eine reine CSS-Methode, um nur das ursprüngliche Striping beizubehalten? Hier ist ein Codepen , um zu zeigen, was mit den beiden Tabellen passiert
Wenn Sie die Möglichkeit haben, den HTML-Code geringfügig zu ändern, können Sie mehrere explizite <tbody> -Elemente verwenden und das untergeordnete Element in dasselbe <tbody> wie das übergeordnete Element einfügen. Dies macht semantischen Sinn und gruppiert den Elternteil mit seinem Kind.
Von Ссылка
Mehrere
<tbody>-Elemente sind zulässig (wenn sie aufeinander folgen), wodurch die Datenzeilen in langen Tabellen in verschiedene Abschnitte unterteilt werden können, von denen jeder nach Bedarf separat formatiert wird
z. B.
Wird es immer nur ein einziges .detail -Element geben?
Wenn ja, könnten Sie den Hintergrund für das TR nach diesem Element "zurücksetzen", wie folgt:
Da diese eingefügte Tabellenzeile den "Index" aller folgenden TR um eins ändert, werden die geraden -Eingaben nach diesen Details mit einem roten Hintergrund fortgesetzt. (Und der Hintergrund für nachfolgende ungerade Zeilen muss "nulled" sein, sonst würden diese immer noch einen roten Hintergrund von der ersten Regel haben.)
Sobald Sie mehr als eine .detail Zeile in die Tabelle eingefügt haben, wird es natürlich nicht mehr so einfach funktionieren.