Zebrastreifen-Look für Tabellen

Mit ein wenig CSS-Code kannst du automatisch eine Tabelle mit Zebrastreifen-Look gestalten. Dies eignet sich insbesondere für längere Tabellen, die viele Einträge enthält. In diesem Artikel zeige ich dir, wie das funktioniert.

 

Automatische Zebrastreifen für Tabellen

Normalerweise müsste man jede einzelne Tabellenreihe von Hand gestalten, um eine farbliche Abhebung der einzelnen Reihen zu erhalten. Mit dem nachstehenden CSS-Code kannst du das jedoch automatisch machen lassen.

Wie so häufig gilt dabei auch hier: Ganz alte Browser verstehen diese Anweisung nicht. Jedoch funktioniert das Ganze in allen halbwegs aktuellen Browsern (siehe auch die Liste am Ende des Artikels).

 

Beispiel:

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

 

 

Kompatibilität

Dieses Script habe ich 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 funktionierte das Script einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen oder hier nicht aufgeführten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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