Aplicar estilo a las celdas de la primera fila

79

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;
}
html css css-selectors html-table 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
1
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
3

Esto debería hacer el trabajo:

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

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