css-café

Variante I

text	text	text
text	text	text
text	text	text
text	text	text
text	text	text

#spiegel table.all-selectors tr:nth-child(2n+1){
background-color: #fff5dd;
}

Die Zeilen der Tabelle werden abwechselnd in hellerer/dunklerer Farbe dargestellt.

Variante II

text	text	text	text	text
text	text	text	text	text
textx	text	text	text	text
text	text	text	text	text
text	text	text	text	text
text	text	text	text	text
text	text	text	text	text
text	text	text	text	text
text	text	text	text	text
text	text	text	text	text

table {
width: 90%;
}
table td, table th {
padding: 2px 10px;
border: 1px solid #000;
}
table th {
background-color: #666;
color: #fff;
}
table tr:nth-child(1n+2) {
background-color: #ccffcc;
color: #000;
}
table tr:nth-child(2n+3) {
background-color: #fff5dd;
color: #000;
}
table tr:hover {
background-color: #c00;
color: #fff;
}

Die Tabelle ist in zwei unterschiedlichen Farben gestreift, die Zeilen können gehovert werden. Die Kopfzeile hat eine eigene feste Farbe und wird nicht gehovert.

Blog-Kommentar eintragen