2010-01-22 15 views
5

Mi estructura de la tabla es como sigue:CSS para encabezados de tabla, incluso filas impares?

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

he definido siguiente CSS, ¿cómo se puede aplicar, "pares", "extraño" clases "navegación", "cabecera" en mi CSS? ¿Cómo se definen se relacionan con la clase 'tabla' como 'table.even', 'table.odd'? gracias

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

Tiene algunos errores en su HTML, como un elemento adicional '' y dos '' en la misma tabla. También hay un # al azar en tu CSS. Supongo que esos son solo errores de copiar y pegar. ;) –

Respuesta

3

referencia solamente la clase del elemento padre o el elemento de matriz misma si usted tiene que utilizar el nombre de clase por más de un tipo de elemento. Por ejemplo, esto:

.navigation { font-weight:bold } 

... en lugar de esto:

tr.navigation { font-weight:bold } 

Se va a reducir el tiempo de carga cuando el navegador muestra la página.

Referencia: Optimize browser rendering [Google Code]

+0

Por razones de mantenimiento futuro, al menos clasificar la tabla y usar un poco de herencia es una buena idea, a menos que sea 100% esta es una clase global. – jhogendorn

1

la aplicación de una clase a cualquier elemento le permite hacer lo siguiente:

element.className { rules } 

Así que con su TR, se puede hacer lo siguiente:

cebra
tr.navigation { font-weight:bold } 

Así creación -las rayas en tus probabilidades y filas de eventos se pueden hacer así:

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

que usaría

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

@devians, según mi respuesta, esto es completamente ineficiente. Es mejor utilizar .navegación para las filas de la tabla y si debe definir diferentes estilos en un elemento diferente, use un nombre de clase diferente. – jay

8

Más simple y no necesito de clase:

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

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

espero ayuda!

Cuestiones relacionadas