我正在尝试让一个复杂表头的粘性表头生效。它对于标准表格来说运作得很好。但是这个表格会在第一行停留而不是第二行,导致表头看起来“不协调”或者有点错落。我尝试将position属性设置为 sticky 放在 thead 上,但似乎没有任何效果。
以下是我的表格:
table {
border: 1px solid black;
font-size: 14px;
margin: 10px 0;
position: relative;
}
thead tr th {
background-color: gray;
position: sticky;
top: -2px;
}
thead {
border: 1px solid black;
line-height: 1.25;
overflow: hidden;
}
td {
border: 1px solid black;
line-height: 1.25;
overflow: hidden;
padding: 4px;
}
<table class='sticky-table'>
<thead>
<tr>
<th rowspan="2">First column</th>
<th colspan="3">Top of second column</th>
</tr>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
</tbody>
</table>