Стиль первый <TD> следующий ряд ж/некоторого класса

Question

мне нужно укладывать первый TD каждой строки,

• следует столбец с классом «заголовок», и
• не имеет Объединение столбцов набор

Я не думаю, что это можно сделать только с помощью CSS, поэтому я предполагаю, что мне нужно использовать jQuery?

<tr> 
    <td colspan="2" class="header">abc</td> 
</tr> 
<tr> 
    <td>sasdas</td> 
    <td>21234r</td> 
</tr> 

... что-то вроде?

$(".header").next("tr>td").css("width","20%"); 

Answer 1

Поскольку classheader находится на <td>, вам необходимо получить его родителя <tr>. Затем получите следующий <tr>, найдите первые <td>. Это как-то уродливо, похоже, вы можете использовать <th> для заголовков столбцов и отделить их от ячейки таблицы.

Попробуйте это:

$(".header").closest('tr').next("tr").find('td:first').not('[colspan]').css("width","20%"); 

Answer 2

:not() действует CSS3, то :has() является JQuery/Шипение только, остальное CSS2.

$('tr:has(.header) + tr td:first-child:not([colspan])') 

Answer 3

Я бы рекомендовал использовать TH для ваших строк заголовков. Гораздо чище, семантически корректно, плюс он делает это, поэтому вам не нужно использовать jQuery, чтобы позаботиться обо всем этом.

HTML:

<tr> 
    <th colspan="2">abc</th> 
</tr> 
<tr> 
    <td>sasdas</td> 
    <td>21234r</td> 
</tr> 

CSS:

td:first-child { 
width: 20%; } 

касается только стилизации строки после заголовка: он выглядит, как вы просто пытаетесь заставить что один столбец быть шириной 20% ? Таким образом, не будет никакого вреда в использовании CSS, который применяет к нему каждый первый столбец. Support for first-child довольно прост в сегодняшнем браузере (IE8 требует DOCTYPE, но он будет работать. Полифиль доступен для более старых версий, если это необходимо).