Применить стиль к ячейкам первой строки


79

Это должно быть очень просто, но я не могу понять.

У меня есть такая таблица:

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

Я хочу, чтобы tdтеги первой trстроки имели vertical-align. Но не второй ряд.

.category_table td{
    vertical-align:top;
}


Да, я видел эту страницу, прежде чем задать вопрос, она не работала.
xperator

Ответы:


175

Используйте, tr:first-childчтобы взять первые tr:

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

Если у вас есть вложенные таблицы и вы не хотите применять стили к внутренним строкам, добавьте несколько дочерних селекторов, чтобы стили получали только элементы верхнего уровня tdв первом верхнем уровне tr:

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

На самом деле я пробовал это раньше, это не работает. Не знаю почему.
xperator 04

1
Я тоже не знаю. Я на 100% уверен, что это работает для всех основных браузеров.
BoltClock

Когда я сравниваю tdтеги первой и второй строки в FireBug, я вижу, что первая строка унаследовала стиль, а вторая строка - нет. Не знаю, почему второй ряд выровнен по вертикали !?
xperator

Тогда это, вероятно, стиль по умолчанию. Я не знаком со стилями таблиц по умолчанию.
BoltClock

Я пошел немного глубже с FireBug. Думаю, я нашел проблему. На самом деле внутри моих tdтегов второй строки у меня есть таблица. Вроде таблица внутри ячеек второго ряда унаследовала стиль.
xperator


0

Ниже работает для первой trиз таблицы подthead

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

И это работает для первого trиз theadи tbodyтак:

table thead tbody tr:first-child {
   background: #f2f2f2;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.