Выделить столбец в элементе таблицы - CSS
У меня есть таблица, построенная в следующем формате:
<thead>
<th></th>
<th></th>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
Я пытаюсь выделить столбец, если столбец заголовка зависает. Итак, допустим, если я навел второй заголовок <th> from, скажем, синий, то второй <td> из каждого <tr>, который делает его столбцом, будет выделен желтым цветом. Как я могу этого добиться? Я пробовал много разных способов, но не выделял <tr>, а только заголовок. Я хотел бы сохранить его в виде таблицы. Кто-нибудь может помочь с этим?
Взгляните w3schools.com/cssref/sel_nth-child.asp
ссылки выглядят так, как будто они относятся к одному цвету, но ячейки заголовка и основной части столбцов имеют разные цвета.
Ответы 1
вы можете сделать что-то вроде этого:
<table>
<thead>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
</thead>
<tbody>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
<td>row 1 cell 3</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
<td>row 2 cell 3</td>
</tr>
<tr>
<td>row 3 cell 1</td>
<td>row 3 cell 2</td>
<td>row 3 cell 3</td>
</tr>
</tbody>
</table>
и CSS
table {
overflow: hidden;
}
td, th {
position: relative;
}
th:hover {background-color:blue;}
th:hover::after {
content: "";
position: absolute;
background-color: grey;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}
разве это не применимо только к одному цвету. Заголовок и основные ячейки имеют разные цвета. Таким образом, заголовок будет синим, а ячейки под ним — серыми.
я отредактировал свой код выше, чтобы иметь другой цвет для строк и заголовка
Для этого вам понадобится js, потому что нет родительского селектора css, поэтому вы не можете указать ячейкам в другой строке, что ячейка заголовка была наведена.