CSS für Tabellenüberschriften, auch ungerade Zeilen?

Question

My Table Struktur ist wie folgt:

<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> 

Ich habe folgende CSS definiert, wie "Navigation" anwenden können, "header", "selbst", "ungerade" Klassen in meinem CSS? Wie definiert man sie in Bezug auf 'Tisch' Klasse wie 'table.even', 'table.odd'? dank

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

Nur die Klasse des übergeordneten Elements Referenz verwenden oder das übergeordnete Element selbst wenn Sie den Klassennamen für mehr als eine Art von Element zu verwenden. Zum Beispiel diese:

.navigation { font-weight:bold } 

... statt dessen:

tr.navigation { font-weight:bold } 

Es wird auf die Ladezeit verkürzen, wenn der Browser die Seite macht.

Referenz: Optimize browser rendering [Google Code]

Answer 2

eine Klasse zu jedem Element anwenden können Sie folgendes tun:

element.className { rules } 

So mit Ihrem TR, könnten Sie wie folgt vorgehen:

tr.navigation { font-weight:bold } 

So Zebra Schaffung -Stripes auf Ihre Chancen und Ereigniszeilen können wie folgt durchgeführt werden:

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

Answer 3

würden Sie

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

Answer 4

einfacher und nicht-Klasse benötigen:

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

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

ich Hilfe hoffen!