Styles de lignes de tableau alternatifs conditionnels

Question

Est-il possible de styliser des lignes de table alternatives sans définir de classes sur des étiquettes <tr> alternatives?

Avec le tableau suivant, CSS peut-il définir des styles de rangs alternatifs SANS devoir donner aux rangées alternatives la classe "row1/row2"? row1 peut être par défaut, donc row2 est le problème.

<style> 
.altTable td { } 
.altTable .row2 td { background-color: #EEE; } 
</style> 

<table class="altTable"> 
<thead><tr><td></td></tr></thead> 
<tbody> 
    <tr><td></td></tr> 
    <tr class="row2"><td></td></tr> 
    <tr><td></td></tr> 
    <tr class="row2"><td></td></tr> 
</tbody> 
</table> 

Answer 1

tr:nth-child(even) { background: #FFF; } 
tr:nth-child(odd) { background: #EEE; } 

ne fonctionne pas dans IE, mais il est une chose purement la forme, le contenu fonctionnera bien Quoi qu'il en soit, je ne pense pas que ce soit un gros problème - en fonction du pourcentage d'utilisateurs réguliers d'IE sur votre site.

Answer 2

Donnez une classe de row2 sur tbody, puis stylisez vos rangées alternatives avec la classe row1. Les autres lignes hériteront de la classe row2 du tbody.

<style> 
.row1 { color: red } 
.row2 { color: blue } 
</style> 

<table class="altTable"> 
<thead><tr><td></td></tr></thead> 
<tbody class="row2"> 
    <tr class="row1"><td>row 1</td></tr> 
    <tr><td>row 2</td></tr> 
    <tr class="row1"><td>row 1</td></tr> 
    <tr><td>row 2</td></tr> 
</tbody> 
</table> 

Answer 3

Oui! Vous pouvez le faire avec CSS pur et pas de cours sur les navigateurs qui prennent en charge le sélecteur « + » du CSS:

.altTable tr td, 
.altTable tr+tr+tr td, 
.altTable tr+tr+tr+tr+tr td { background-color: #EEE; } 

.altTable tr+tr td, 
.altTable tr+tr+tr+tr td, 
.altTable tr+tr+tr+tr+tr+tr td{ background-color: #fff; } 

Probablement pas la meilleure approche, mais faisable.

Si cela ne vous dérange pas un peu Javascript, jQuery vous donne à beaucoup de façon concise:

$('.altTable tr:odd').addClass('odd');