| 

.NET C# Java Javascript Exception

2
Ich möchte eine klassische Tabelle so aufbereiten, dass jede zweite Tabellenzeile eine andere Farbe aufweist. Bisher funktioniert das nur, indem ich jeder zweiten Zeile ein andere Klasse zuweise. Das ist ziemlich umständlich -- besonders dann, wenn sich die Anzahl der Zeilen öfter mal ändert. Nun habe ich gehört, dass dieses Problem mit CSS3 weitgehend erledigt sein soll. Wie funktioniert das?

<table>    
 <tr><td>Zelle 1</td><td>Zelle 2</td></tr>   
 <tr><td>Zelle 3</td><td>Zelle 4</td></tr>   
 <tr><td>Zelle 5</td><td>Zelle 6</td></tr>  
 <tr><td>Zelle 7</td><td>Zelle 8</td></tr>  
 <tr><td>Zelle 9</td><td>Zelle 10</td></tr>   
<tr><td>Zelle 11</td><td>Zelle 12</td></tr></table>
21.12.2011
silverarrow23
silverarrow23
41 ● 1
Kannst / willst du jquery nutzen?
– Nicolai Schönberg 21.12.2011
2 Antworten
2
Das geht mit den CSS-Pseudo-Klassen even und odd.

<style>
  .zebra tr { /* defaults */ background:white; }
  .zebra tr:nth-child(even) { /* overrides */ background:red; } 
</style>

<table class="zebra">    
 <tr><td>Zelle 1</td><td>Zelle 2</td></tr>   
 <tr><td>Zelle 3</td><td>Zelle 4</td></tr>   
 <tr><td>Zelle 5</td><td>Zelle 6</td></tr>  
 <tr><td>Zelle 7</td><td>Zelle 8</td></tr>  
 <tr><td>Zelle 9</td><td>Zelle 10</td></tr>   
 <tr><td>Zelle 11</td><td>Zelle 12</td></tr>
</table>

Demo: http://jsfiddle.net/5bfXY/

Anmerkung:

"nth-child" steht im IE erst seit Version 9 zur Verfügung.
21.12.2011
Floyd
Floyd
11,0k ● 3 ● 9
Editiert 21.12.2011
Floyd
Floyd
11,0k ● 3 ● 9
eh ja, war ich mal wieder zu langsam. +1 ;)
– Nicolai Schönberg 21.12.2011
2
Hallo,

ab CSS 3 kannst du den nth-child für so etwas benutzen.

Demo Jsfiddle

Erläuterung: w3schools.com


Gruß
21.12.2011
Nicolai Schönberg
Nicolai Schönberg
2,3k ● 1 ● 8
+1, du musst schneller schreiben ;)
– Floyd 21.12.2011
Oder wir brauchen so ein ähnliches feature wie auf Stackoverflow - "neue Antworten vorhanden". Dann kann man sich den doppelpost sparen :)
– Nicolai Schönberg 21.12.2011

Stelle deine Web-Frage jetzt!