CSS3 Zebra Striping ist die bessere Lösung! Warum? Hier ist das richtige Konzept
1. PHP generiert HTML als Ausgabe, die sich nicht darum kümmern sollte, wie die Elemente aussehen. 2. CSS dient dazu, sich darum zu "kümmern", wie die Elemente aussehen.
tbody tr:nth-child(odd) im Grunde wählst du jede ungerade nummerierte tr von tbody aus etwas wie tbody ->tr(ausgewählt) ->tr ->tr(ausgewählt) es spielt also keine Rolle, wie viele Zeilen die Tabelle hat, sie wird immer eine farbige Zeile und danach eine weiße Zeile haben.
Ich wollte mich nur für all die coolen Tipps und Tricks bedanken. Ich habe den CSS-Zebra-Stripe-Trick schon einmal verwendet, aber es war mir nicht eingefallen, mein CSS mit tbody zu präfixen, damit ich Hovers und Ähnliches besser ansprechen kann.
Das ist großartig, leider funktioniert es nicht in IE. Deshalb benutze ich die PHP- oder jQuery-Variante, bis IE aufwacht und diesen schrecklichen Browser abschaltet.
Ich möchte das verwenden, aber ich habe Tabellen innerhalb meiner Tabellenzeilen, weiß jemand, wie ich verschachtelte Zeilen/Spalten überspringen kann? Danke!
Als Antwort auf die Möglichkeit, jQuery zu verwenden: Es fügt auch viele Klassen hinzu, (wenn es hochskaliert wird und es Hunderte von Zeilen gibt) würde es viele Klassen hinzufügen. und infolgedessen könnte das irgendwann zu aufgeblähtem Code führen oder die Seite sogar verlangsamen? (nicht viel, aber ein bisschen) und so wollte Chris wahrscheinlich einfach die effizienteste Methode zur Verwendung des Codes verwenden, oder vielleicht nur die erste, die ihm in den Sinn kam, oder einfach nur Präferenz. Nur ein Gedanke :)
Ich habe Abfragen zur Menge hinzugefügt, sodass Zebra-Streifen *nur* aktiviert werden, wenn eine Tabelle mehr als eine bestimmte Anzahl von Zeilen hat: https://codepen.io/cadars/pen/PoKrdjp
großartig, hat mir definitiv Zeit beim Suchen gespart
Das hat bei mir nicht gut funktioniert, aber die PHP-Version hat großartig funktioniert.
CSS3 Zebra Striping ist die bessere Lösung! Warum? Hier ist das richtige Konzept
1. PHP generiert HTML als Ausgabe, die sich nicht darum kümmern sollte, wie die Elemente aussehen.
2. CSS dient dazu, sich darum zu "kümmern", wie die Elemente aussehen.
Oder
http://webbytedd.com/b/color-rows/
CSS3 funktioniert möglicherweise nicht in IE9- oder einigen älteren Browsern.
Ich verstehe nicht, wie es funktioniert...
tbody tr:nth-child(odd)
im Grunde wählst du jede ungerade nummerierte tr von tbody aus
etwas wie
tbody
->tr(ausgewählt)
->tr
->tr(ausgewählt)
es spielt also keine Rolle, wie viele Zeilen die Tabelle hat, sie wird immer eine farbige Zeile und danach eine weiße Zeile haben.
@Dyllon und @Artem, hier ist eine einfache Demo, die erklärt, wie dieser Code verwendet wird, und ein Live-Beispiel dafür.
http://webdesignandsuch.com/2010/08/add-zebra-striping-to-a-table-with-css3/
Leider... wird von IE nicht unterstützt
Leider... benutzt du IE
Kann mit jQuery addClass gemacht werden.
Genau: Aber es braucht mehr Codezeilen.
scheiß Explorer unterstützt es nicht
Ich wette, diese Leute, die sagen, dass es nicht funktioniert, sind Browser, die nicht unterstützt werden. :D
Ich meinte, *mit* Browsern, die nicht unterstützt werden.
Ich wollte mich nur für all die coolen Tipps und Tricks bedanken. Ich habe den CSS-Zebra-Stripe-Trick schon einmal verwendet, aber es war mir nicht eingefallen, mein CSS mit tbody zu präfixen, damit ich Hovers und Ähnliches besser ansprechen kann.
Wie behält man ein konsistentes Zebra-Muster in einer sortierbaren PHP-Tabelle bei?
Hey, hast du in diesen 12 Jahren eine Antwort darauf gefunden?
Das ist großartig, leider funktioniert es nicht in IE. Deshalb benutze ich die PHP- oder jQuery-Variante, bis IE aufwacht und diesen schrecklichen Browser abschaltet.
ICH BIN EINE STIMME AUS DEINER ZUKUNFT, es ist jetzt 2016 und er ist immer noch NICHT abgeschaltet!
Großartig, danke!
Ich möchte das verwenden, aber ich habe Tabellen innerhalb meiner Tabellenzeilen, weiß jemand, wie ich verschachtelte Zeilen/Spalten überspringen kann? Danke!
Ich denke, es wird den Internet Explorer nicht unterstützen,
aber es ist nützlich.
Als Antwort auf die Möglichkeit, jQuery zu verwenden: Es fügt auch viele Klassen hinzu, (wenn es hochskaliert wird und es Hunderte von Zeilen gibt) würde es viele Klassen hinzufügen. und infolgedessen könnte das irgendwann zu aufgeblähtem Code führen oder die Seite sogar verlangsamen? (nicht viel, aber ein bisschen) und so wollte Chris wahrscheinlich einfach die effizienteste Methode zur Verwendung des Codes verwenden, oder vielleicht nur die erste, die ihm in den Sinn kam, oder einfach nur Präferenz. Nur ein Gedanke :)
Für meinen Fall ist das perfekt.
Danke für eine so prägnante Lösung. :-)
Danke! es hat funktioniert :))
Ich habe Abfragen zur Menge hinzugefügt, sodass Zebra-Streifen *nur* aktiviert werden, wenn eine Tabelle mehr als eine bestimmte Anzahl von Zeilen hat: https://codepen.io/cadars/pen/PoKrdjp