Как раскрасить столбец таблицы определенным классом в заголовке с помощью CSS?
table, th, td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
th.red {
background-color: red;
}<table>
<thead>
<tr>
<th>q</th><th class = "red">w</th><th>e</th><th>r</th><th>t</th><th>y</th>
</tr>
</thead>
<tbody>
<tr>
<td>q1</td><td>w1</td><td>e1</td><td>r1</td><td>t1</td><td>y1</td>
</tr>
<tr>
<td>q2</td><td>w2</td><td>e2</td><td>r2</td><td>t2</td><td>y2</td>
</tr>
</tbody>
</table>Есть ли способ раскрасить столбец таблицы, заголовок которого имеет определенный класс, с помощью CSS?
Например, в этой таблице нужно раскрасить второй столбец.
Ответы 3
Вы можете имитировать это, используя переливающуюся окраску, исходящую из заголовка.
table,th,td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
th.red {
position: relative;
}
th.red:before {
content: "";
position: absolute;
z-index: -1; /* a negative z-index */
inset: 0 0 -999px; /* big value for the bottom */
background: red;
}
table {
overflow: hidden; /* hide the overflow of the pseudo element */
isolation: isolate; /* make sure the coloration stay within the table (create a stacking context) */
background: #f2f2f2;
}<table>
<thead>
<tr>
<th>q</th><th class = "red">w</th><th>e</th><th>r</th><th>t</th><th>y</th>
</tr>
</thead>
<tbody>
<tr>
<td>q1</td><td>w1</td><td>e1</td><td>r1</td><td>t1</td><td>y1</td>
</tr>
<tr>
<td>q2</td><td>w2</td><td>e2</td><td>r2</td><td>t2</td><td>y2</td>
</tr>
</tbody>
</table>Вы также можете поставить <colgroup>...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
table, th, td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
.col_red {
background-color: red;
}<table>
<colgroup>
<col />
<col class = "col_red" />
</colgroup>
<thead>
<tr>
<th>q</th><th>w</th><th>e</th><th>r</th><th>t</th><th>y</th>
</tr>
</thead>
<tbody>
<tr>
<td>q1</td><td>w1</td><td>e1</td><td>r1</td><td>t1</td><td>y1</td>
</tr>
<tr>
<td>q2</td><td>w2</td><td>e2</td><td>r2</td><td>t2</td><td>y2</td>
</tr>
</tbody>
</table>@Zourab, что вы хотите, чтобы произошло, если ячейка столбца уже имеет цвет фона?
@Zourab Я не думаю, что тогда у тебя получится использовать col в такой ситуации. Developer.mozilla.org/en-US/docs/Web/HTML/Element/…: «Поскольку цвет фона столбца закрашивается поверх таблицы и групп столбцов (<colgroup>), но за фоновыми цветами применяются для групп строк (<thead>, <tbody> и <tfoot>), строк (<tr>) и отдельных ячеек (<th> и <td>), фон, примененный к столбцам таблицы, виден только в том случае, если каждый слой, нарисованный поверх них, имеет прозрачный фон».
@Бретт Дональд, если ячейка столбца (<td>) уже имеет цвет фона, и я добавляю класс col_red к соответствующему тегу <col>, тогда все ячейки столбцов должны быть окрашены в соответствии с классами col_red.
@Zourab Тег colgroup появился раньше css3, поэтому вместо этого планируйте использовать селектор :nth-child() с минимумом JS-кода. PS: мой ответ согласуется с вашим вопросом. Если у вас другая проблема, вам следует задать новый вопрос.
Вы можете использовать селектор :nth-child().
table, th, td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
tr > :nth-child(2) {
background-color: red;
}<table>
<thead>
<tr>
<th>q</th><th>w</th><th>e</th><th>r</th><th>t</th><th>y</th>
</tr>
</thead>
<tbody>
<tr>
<td>q1</td><td>w1</td><td>e1</td><td>r1</td><td>t1</td><td>y1</td>
</tr>
<tr>
<td>q2</td><td>w2</td><td>e2</td><td>r2</td><td>t2</td><td>y2</td>
</tr>
</tbody>
</table>Цель состоит в том, чтобы окрасить столбец, когда пользователь нажимает на его заголовок, поэтому мы не знаем номер столбца заранее.
также tr :nth-child(2) {
Вау, это очень хорошо, спасибо! Один вопрос - что делать, если ячейки столбца уже окрашены их атрибутами "стиля"?