[英]highlight a column on table element - CSS
I have a table constructed in the following format: 我有一个表,其格式如下:
<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>
I'm trying to highlight a column if the header column is hovered. 如果标题栏悬停,我想突出显示一列。 So let's say if I hovered the second header
<th> from
, say blue, then the second <td>
from every <tr>
, which makes it a column, will be highlighted in yellow. 因此,假设我将第二个标头
<th> from
悬停在,例如蓝色,则每个<tr>
的第二个<td>
(使其成为一列)将以黄色突出显示。 How can I achieve this? 我该如何实现? I've tried many different ways but its not highlighting the
<tr>
, only the header. 我尝试了许多不同的方法,但没有突出显示
<tr>
,而是仅突出显示了标头。 I would like to keep it in a table structure. 我想将其保留在表结构中。 Can anybody help with this?
有人可以帮忙吗?
you can do something like this: 您可以执行以下操作:
<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>
and css 和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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.