CSS pour les en-têtes de tableau, même les lignes impaires?

Question

Ma structure de table est comme suit:

<table> 
<thead> 
    <tr class="navigation"> 
    </tr> 
</thead> 
<thead> 
    <tr class="headers"> 
    </tr> 
</thead> 
<tbody> 
    <tr class="even"> 
    <td><a href="#"/></td> 
    </tr> 
    <tr class="odd"> 
    </tr> 
    </tr> 
</tbody> 
</table> 

Je l'ai défini suivant CSS, comment appliquer "navigation", "tête", "même", les classes "bizarres" dans mon CSS? Comment les définir se rapportent à la classe 'table' comme 'table.even', 'table.odd'? grâce

table{ 
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
    font-size: 10px; 
    #margin: 45px; 
    width:100%; 
    text-align: left; 
    border-collapse: collapse; 
} 

Answer 1

référence seulement la classe de l'élément parent ou l'élément parent lui-même si vous devez utiliser le nom de classe pour plus d'un type d'élément. Par exemple, ceci:

.navigation { font-weight:bold } 

... au lieu de ceci:

tr.navigation { font-weight:bold } 

Il permettra de réduire le temps de chargement lorsque le navigateur affiche la page.

Référence: Optimize browser rendering [Google Code]

Answer 2

Appliquer une classe à tout élément vous permet de faire ce qui suit:

element.className { rules } 

Avec votre TR, vous pouvez effectuer les opérations suivantes:

tr.navigation { font-weight:bold } 

créant ainsi zèbre - les stries sur vos cotes et les rangées d'événements peuvent être faites comme ceci:

tr.odd { background-color:#FFF; } 
tr.even { background-color:#CCC; } 

Answer 3

vous utiliseriez

table thead tr.navigation {} 
table thead tr.headers {} 
table tbody tr.even {} 
table tbody tr.odd {} 

Answer 4

Plus simple et ne avez pas besoin de classe:

tbody tr:nth-child(odd) { 
    put your style here... 
} 

tbody tr:nth-child(even) { 
    put your style here... 
} 

J'espère que l'aide!