CSS: Alternierende Tabellenzeilen

Dieser Artikel wurde von Do, Hoang Viet am Dienstag, 4. Februar 2014 verfasst. Aktualisiert: 04.02.2014 13:49:49

Um die Lesbarkeit von Tabellen zu steigern, bietet die CSS die Möglichkeit Tabellenzeilen alternierend zu färben. Wie das funktioniert zeigen, wir euch im nachfolgendem Artikel.

Die nachfolgende CSS Definition färbt alle geraden Zeilen hellgrau:

tr:nth-child(odd) {
    background: #eee
}

Um alle ungeraden Zeilen dunkelgrau zu färben:

tr:nth-child(even) {
    background: #666
}

Der nth-child Selektor erlaubt auch die Auswahl einzelne Zeilen. Die nachfolgende Definition färbt die 4. Zeile rot 

tr:nth-child(4) {
    background: #ff0000
}

Support für Internet Explorer 6 - 8

Für älterende Browser gibt es Frameworks wie etwa Selectivizr (externe Link), die ihr nur in eure Seite einbetten müsst:

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

 Keine weiteren Änderungen notwendig.

Alternative: jQuery

Da jQuery 1.x (externe Link) von den meisten Browser (unter anderem Internet Explorer 6) unterstützt wird, stellt es eine mögliche Alternative da. 

Ihr definiert dazu folgende 2 CSS-Klassen

.odd-rows {
    background: #eee;
}
even-rows {
    background: #666
}

Nun rufen wir irgendwo das nachfolgende Skript auf

$("tr:nth-child(odd)").addClass(".odd-rows");
$("tr:nth-child(even)").addClass(".even-rows");

 

 
blog comments powered by Disqus

Google Anzeigen

Neusten Blogeinträgen

  • CSS: Animationen

    CSS3 bietet von Haus aus Möglichkeiten zur Definition von Animationen über die Property animation. Wie es funktioniert zeigen wir in diesem Artikel.

  • Unity3D: Konsolenausgabe formatieren

    Die Unitykonsole ist einer der meistgenutzten Feature wenn es bei Unity um Fehlersuche und -behandlung geht. Sie wird dabei schnell voll und verli ...

  • Unity3D: Singleton für langsame Operationen

    Operationen wie Object.FindObjectOfType werden in der Dokumentation von Unity3D Entwickler selbst als sehr langsam beschrieben. Aus dem Grund wird ...

  • Unity3D: Optionale Parameter

    Unity3D (4.3.1) unterstützt keine optionale Parameter, wenn die betroffene Skriptdatei in einem Namespace definiert wird.

Popular Threads

Share it on your network