Zebrastreifen im CSS

tempa wrote this 01:02:

Irgendwie ist es doof, dass CSS selbst Modulo nicht zu kennen scheint … zumindest habe ich nichts gefunden. Es gibt zahlreiche Javascriptlösungen. Hier jene auf A List apart: Zebra Tables

Und das ist meine Lösung per PHP:

  1. <tr<?php $num = ($num+1); echo ($num % 2) ? '' : ' class="odd"';?>>
  2. <td>SP1R1 Zelleninhalt</td>
  3. <td>SP2R1 Zelleninhalt</td>
  4. <td>SP3R1 Zelleninhalt</td>
  5. </tr>
  6. <tr<?php $num = ($num+1); echo ($num % 2) ? '' : ' class="odd"';?>>
  7. <td>SP1R2 Zelleninhalt</td>
  8. <td>SP2R2 Zelleninhalt</td>
  9. <td>SP3R2 Zelleninhalt</td>
  10. </tr>

Das geht vermutlich eleganter, aber immerhin, es ist immer die selbe Zeile so dass man sich keine Gedanken machen muss, ob dies nun eine gerade oder ungerade Zeile ist und man kann jederzeit zwischenrein eine Zeile einfügen. Die Streifen bleiben erhalten.

Ursprünglich gepostet am 23. Oktober 06, 03:34 in meinem Blog „Silkester erzählt“.

Update:

CSS3 bietet für diese beliebte Listendarstellung mittlerweile nth-child siehe W3C Pseudoklassen (6.6.5.2. : nth-child() pseudo-class)

  1. foo:nth-child(even) { backrgound-color: "#999" }
  2. foo:nth-child(odd) { backrgound-color: "#CCC" }

nth-child wird in fast allen aktuellen Browsern unterstützt. Unbeachtet bleibt die Pseudo-Klasse im IE, selbst im IE8. Für IE gibt es den folgenden Heckmeck:

  1. /* li:nth-child(2) */
  2. li:first-child + li {}/*Works for IE8*/

Leave a Reply