Wenden Sie Stil auf Zellen der ersten Zeile an

79

Es sollte sehr einfach sein, aber ich kann es nicht herausfinden.

Ich habe einen Tisch wie diesen:

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

Ich möchte tdTags der ersten trZeile haben lassen vertical-align. Aber nicht die zweite Reihe.

.category_table td{
    vertical-align:top;
}
xperator
quelle
Ja, ich habe diese Seite gesehen, bevor ich eine Frage gestellt habe. Es hat nicht funktioniert.
Xperator

Antworten:

172

Verwenden Sie tr:first-child, um die erste zu nehmen tr:

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

Wenn Sie verschachtelte Tabellen haben und keine Stile auf die inneren Zeilen anwenden möchten, fügen Sie einige untergeordnete Selektoren hinzu, damit nur die tds der obersten Ebene in der ersten obersten Ebene trdie Stile erhalten:

.category_table > tbody > tr:first-child > td {
    vertical-align: top;
}
BoltClock
quelle
Eigentlich habe ich das schon mal versucht, es funktioniert nicht. Nicht sicher warum.
Xperator
1
Ich weiß es auch nicht. Ich bin zu 100% davon überzeugt, dass dies für alle gängigen Browser funktioniert.
BoltClock
Wenn ich tdTags der ersten und zweiten Zeile in FireBug vergleiche, kann ich sehen, dass die erste Zeile den Stil geerbt hat, die zweite Zeile jedoch nicht. Ich weiß nicht, warum die zweite Reihe vertikal ausgerichtet ist !?
Xperator
Dann ist es wahrscheinlich ein Standardstil. Ich bin nicht mit Standardtabellenstilen vertraut.
BoltClock
Ich bin mit FireBug etwas tiefer gegangen. Ich glaube, ich habe das Problem gefunden. Eigentlich habe ich in meinen tdTags der zweiten Reihe eine Tabelle. Es scheint, dass die Tabelle in den Zellen der zweiten Zeile den Stil geerbt hat.
Xperator
3

Dies sollte die Arbeit erledigen:

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

Unten funktioniert für den ersten trTeil der Tabelle unterthead

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

Und das funktioniert für die erste trvon theadund tbodybeide:

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