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 Script habe ich des Weiteren mit diesen Browsern getestet:

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

 

In diesen Browsern klappte das Script dabei einwandfrei. Ich kann jedoch leider nicht sagen, ob das Beispiel auch in älteren oder hier nicht aufgeführten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.