第二个表头在悬停时显示了另一个元素。问题是,当鼠标悬停时,它将失去在MS Edge中的粘性位置,并且在滚动表时该元素也会停留。在Chrome和Firefox中可以正常使用。
[我发现,如果html不包含我不知道的DOCTYPE,则可以使用。
td, th {
padding: 5px 15px;
}
th {
position: sticky;
top: 0;
background: black;
color: white;
}
th:hover .disp{
display: inline;
}
.disp {
display: none;
position: relative;
}
.container {
height: 180px;
overflow: scroll;
}
<body>
<div class="container">
<table id="tableId" height="360">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Size<div class="disp">hi</div></th>
<th>File</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>103Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>12Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>14Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
</body>
我使用MS Edge旧版浏览器44.18362.449.0测试了该问题,在那可以看到该问题。
我检查了代码,看起来像。disp类中的position:absolute;导致了此问题。
我检查了文档,但未获得有关此行为的任何信息。
如果将位置设置为相对或静态,则可以解决该问题。您可以将其用作解决此问题的方法。
代码:
td, th {
padding: 5px 15px;
}
th {
position: sticky;
top: 0;
background: black;
color: white;
}
th:hover .disp{
display: block;
align-items: center;
}
.disp {
display: none;
position: relative;
right: 8px;
top: 8px;
}
.container {
height: 180px;
overflow: scroll;
}
<div class="container">
<table id="tableId" height="360">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Size<div class="disp">hi</div></th>
<th>File</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>103Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>12Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>14Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
输出:
编辑:
如果您设置display:inline-table;。这将有助于解决该问题,并且两个元素都将显示在同一行中。
输出: