Zebrastreifen-Look für Tabellen

Mit ein wenig CSS Code kannst du automatisch eine Tabelle mit Zebrastreifen Look gestalten. Dies eignet sich besonders gut für lange Tabellen, die viele Einträge enthalten. In diesem Artikel zeige ich dir, wie das funktioniert.

Automatische Zebrastreifen für Tabellen

Um einzelne Reihen einer Tabelle farblich zu unterscheiden, müsste man eigentlich jede Reihe einzeln gestalten. Doch es geht auch ganz automatisch. Mit dem folgenden CSS Code kannst du dir dabei viel Arbeit sparen.

Wie so häufig gilt dabei auch hier: Ganz alte Browser verstehen diese Anweisung nicht. Jeder halbwegs aktuelle Browser setzt diesen CSS Code jedoch ganz normal um. Dazu kannst du auch die Tabelle am Ende des Artikels vergleichen.


Beispiel:

tbody tr:nth-child(odd) {
   background-color:#f6f8fb;
}

Alternative

Eine Alternative zu dieser Variante kann es auch sein, eine Tabelle mit CSS zu erstellen. So kannst du sogar einzelne Spalten unabhängig voneinander gestalten. Allerdings gibt es hier auch den Nachteil, dass diese Variante nicht mit allen Browsern funktioniert. Es kann sogar passieren, dass Browser die Ergebnisse unterschiedlich darstellen. Daher solltest du deine so erstellten Tabellen immer noch einmal mit verschiedenen Browsern überprüfen.

Browser Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

  • Google Chrome 31
  • Firefox 26
  • Internet Explorer 11
  • Opera 18
  • Safari (iPhone-Version, iOS 7.0.4)

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.


Anzeige:


Schreibe einen Kommentar