突出显示表格行和列
[英]Highlight table row and column
问题描述
I am trying out css to create a table in which when we hover on table cell, the row and columns of that respective cell highlight.
我正在尝试 css 创建一个表格，当我们在表格单元格上使用 hover 时，相应单元格的行和列会突出显示。
I have created this up till now https://codepen.io/Abiha/pen/GRMWOJv but I can't seem to fix the colors accordingly and that the highlight part should not highlight first column and row.到目前为止，我已经创建了这个https://codepen.io/Abiha/pen/GRMWOJv但我似乎无法相应地修复 colors 并且突出显示部分不应突出显示第一列和第一行。 Here's the code as well这里也是代码
<html>
<head>
<style>
table { border-collapse:separate; border-spacing:0 3px; color:#505759; overflow: hidden; } td { padding: 12px; vertical-align: text-top; position: relative; }
tr:hover{
background-color: rgba(241, 239, 245,0.5);
}
td:hover::after {
background-color: rgba(241, 239, 245,0.5);
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
}
tr {
background-color: #f8f7f5;
padding-bottom:5rem;}
tbody > tr:first-child > td {
padding: 31px 12px 32px 12px;
text-align: left;
background-color: #d1dde0;
width: auto;
font-weight: bold;
color: #505759;
}
tbody > tr:nth-of-type(n) > td:first-of-type {
background-color: #d1dde0;
}
tbody > tr:nth-of-type(1) > td:first-of-type {
background-color: white;
}
</style>
</head>
<body>
<table><tbody>
<tr><td><br></td><td><strong>CLASP IITR Pivotal</strong></td><td><strong>Triluminate Pivotal</strong></td><td><strong>Tri-FR</strong></td><td><strong>TRICI-HF</strong></td><td><strong>Tri-CLASP PMCF</strong></td><td><strong>bRIGHT-EU PAS</strong></td><td><strong>TriValve</strong></td><td><strong>OBSERV-MITRA</strong></td><td><strong>German Registry for TTVI</strong></td><td><strong>Italian Registry for TTVI</strong></td></tr>
<tr><td><strong>NCT</strong></td><td>NCT<br>
04097145</td><td><p>NCT</p>
<p>03904147</p>
</td><td><p>NCT</p>
<p>04646811</p>
</td><td><p>NCT</p>
<p>04634266</p>
</td><td><p>NCT</p>
<p>04614402</p>
</td><td><p>NCT</p>
<p>04483089</p>
</td><td><p>NCT</p>
<p>03416166</p>
</td><td><p>NCT</p>
<p>04577248</p>
</td><td><p>NCT</p>
<p>04653428</p>
</td><td><p>NCT</p>
<p>04735003</p>
</td></tr>
<tr><td><strong>Countries</strong></td><td>USA</td><td>USA, Canada, EU</td><td><p>France, Belgium</p>
<p><br></p>
</td><td>Germany</td><td>EU</td><td>EU</td><td>Worldwide</td><td>Germany</td><td>Germany</td><td>Italy</td></tr>
</tbody></table>
</body>
</html>
PS I can't change the HTML at all. PS 我根本无法更改 HTML。 Need to fix this with css only仅需要使用 css 修复此问题
2 个解决方案
解决方案1
0 2021-12-15 21:24:35
You can try:你可以试试：
tbody > tr:first-child > td {
z-index: 1000;
}
td:hover::after {
z-index: 1;
}
This will make the header appear above the after这将使 header 出现在后面
解决方案2
0 2021-12-15 21:36:09
Couple of things you can do to highlight just all the columns and rows except first.您可以做几件事来突出显示除第一个之外的所有列和行。 As I said, you can apply the same on css as well using :not(:first-child) .正如我所说，您也可以在 css 上应用相同的方法，也可以使用:not(:first-child) 。
Most Important part I've added is我添加的最重要的部分是
tr:first-child{
z-index: 2;
position: relative;
}
It will make first tr very up on z-index vise.这将使第一个 tr 在 z-index 虎钳上非常高。
Also instead of td:hover::after you should use tr:not(:first-child) td:not(:first-child):hover::after so it will avoid first row as well as first td.也不是td:hover::after你应该使用tr:not(:first-child) td:not(:first-child):hover::after所以它会避免第一行以及第一行。
See the Snippet below:请参阅下面的片段：
table { border-collapse:separate; border-spacing:0 3px; color:#505759; overflow: hidden; } td { padding: 12px; vertical-align: text-top; position: relative;} tr:hover{ background-color: #F1EFEB; } tr:first-child{ z-index: 2; position: relative; } tr:not(:first-child) td:not(:first-child):hover::after { background-color: #F1EFEB; content: ''; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; } tr { background-color: transparent; padding-bottom:5rem;} tbody > tr:first-child > td { padding: 31px 12px 32px 12px; text-align: left; background-color: #d1dde0; width: auto; font-weight: bold; color: #505759; } tbody > tr:nth-of-type(n) > td:first-of-type { background-color: #D1DDE0; } tbody > tr:nth-of-type(1) > td:first-of-type { background-color: white; }
<table><tbody> <tr><td><br></td><td><strong>CLASP IITR Pivotal</strong></td><td><strong>Triluminate Pivotal</strong></td><td><strong>Tri-FR</strong></td><td><strong>TRICI-HF</strong></td><td><strong>Tri-CLASP PMCF</strong></td><td><strong>bRIGHT-EU PAS</strong></td><td><strong>TriValve</strong></td><td><strong>OBSERV-MITRA</strong></td><td><strong>German Registry for TTVI</strong></td><td><strong>Italian Registry for TTVI</strong></td></tr> <tr><td><strong>NCT</strong></td><td>NCT<br> 04097145</td><td><p>NCT</p> <p>03904147</p> </td><td><p>NCT</p> <p>04646811</p> </td><td><p>NCT</p> <p>04634266</p> </td><td><p>NCT</p> <p>04614402</p> </td><td><p>NCT</p> <p>04483089</p> </td><td><p>NCT</p> <p>03416166</p> </td><td><p>NCT</p> <p>04577248</p> </td><td><p>NCT</p> <p>04653428</p> </td><td><p>NCT</p> <p>04735003</p> </td></tr> <tr><td><strong>Countries</strong></td><td>USA</td><td>USA, Canada, EU</td><td><p>France, Belgium</p> <p><br></p> </td><td>Germany</td><td>EU</td><td>EU</td><td>Worldwide</td><td>Germany</td><td>Germany</td><td>Italy</td></tr> </tbody></table> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.