Aplicar estilo a las celdas de la primera fila

Debería ser muy simple pero no puedo entenderlo.

Tengo una mesa como esta:

<table class="category_table">
 <tr><td> blabla 1</td><td> blabla 2 </td></tr>
 <tr><td> blabla 3 </td><td> blabla 4 </td></tr>
</table>

Quiero hacer que las tdetiquetas de la primera trfila tengan vertical-align. Pero no la segunda fila.

.category_table td{
    vertical-align:top;
}

— xperador
fuente

stackoverflow.com/questions/613284/…

— huMpty duMpty

Sí, he visto esa página antes de hacer una pregunta, no estaba funcionando.

— xperator

Respuestas:

174

Utilice tr:first-childpara tomar el primero tr:

.category_table tr:first-child td {
    vertical-align: top;
}

Si tiene tablas anidadas y no desea aplicar estilos a las filas internas, agregue algunos selectores secundarios para que solo los de nivel superior tden el primer nivel superior trobtengan los estilos:

.category_table > tbody > tr:first-child > td {
    vertical-align: top;
}

— BoltClock
fuente

De hecho, probé esto antes, no funciona. No estoy seguro de por qué.

— xperator

Yo tampoco lo sé. Tengo un 100% de confianza en que esto funciona para todos los navegadores principales.

— BoltClock

Cuando comparo las tdetiquetas de la primera y la segunda fila en FireBug, puedo ver que la primera fila ha heredado el estilo, pero la segunda fila no. No sé por qué la segunda fila está alineada verticalmente.

— xperador

Entonces probablemente sea un estilo predeterminado. No estoy familiarizado con los estilos de tabla predeterminados.

— BoltClock

He profundizado un poco más con FireBug. Creo que encontré el problema. En realidad, dentro de mis tdetiquetas de la segunda fila, tengo una tabla allí. Parece que la tabla dentro de las celdas de la segunda fila heredó el estilo.

— xperator

Esto debería hacer el trabajo:

.category_table tr:first-child td {
    vertical-align: top;
}

— Simone
fuente

A continuación funciona para el primero trde la tabla debajothead

table thead tr:first-child {
   background: #f2f2f2;
}

Y esto funciona para la primera trde las theady tbodylos dos:

table thead tbody tr:first-child {
   background: #f2f2f2;
}

— Vikas Kumar
fuente