Zastosuj styl do komórek pierwszego rzędu


79

To powinno być bardzo proste, ale nie mogę tego rozgryźć.

Mam taki stół:

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

Chcę, aby tdtagi pierwszego trrzędu miały vertical-align. Ale nie w drugim rzędzie.

.category_table td{
    vertical-align:top;
}


Tak, widziałem tę stronę przed zadaniem pytania, nie działała.
xperator

Odpowiedzi:


175

Użyj, tr:first-childaby wziąć pierwszy tr:

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

Jeśli masz zagnieżdżone tabele i nie chcesz stosować stylów do wewnętrznych wierszy, dodaj kilka selektorów podrzędnych, aby style były pobierane tylko z najwyższego poziomu tdw pierwszym najwyższym poziomie tr:

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

Właściwie próbowałem tego wcześniej, to nie działa. Nie pewny dlaczego.
xperator

1
Ja też nie wiem. Mam 100% pewności, że działa to we wszystkich głównych przeglądarkach.
BoltClock

Kiedy porównuję tdtagi pierwszego i drugiego wiersza w FireBug, widzę, że pierwszy wiersz odziedziczył styl, ale drugi wiersz nie. Nie wiem, dlaczego drugi rząd jest wyrównany w pionie !?
xperator

To prawdopodobnie styl domyślny. Nie znam domyślnych stylów tabel.
BoltClock

Poszedłem trochę głębiej w FireBug. Myślę, że znalazłem problem. Właściwie wewnątrz moich tdtagów drugiego rzędu mam tam tabelę. Wygląda na to, że tabela w komórkach drugiego wiersza odziedziczyła styl.
xperator

3

To powinno wystarczyć:

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

0

Poniżej działa dla pierwszej trz tabeli poniżejthead

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

I to działa po raz pierwszy trod theadi tbodyoba:

table thead tbody tr:first-child {
   background: #f2f2f2;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.