如何使 css 表的头部具有粘性

Question

我有一个 css 表，前 2 列已经很粘了，一切正常，但我希望表头也很粘。我只是无法让它工作。

我已经尝试过为每个类使用一个类：位置：粘性，顶部：0。

此代码使前 2 列具有粘性

table {
table-layout: fixed;
width: 100%;
}
.fixed{
position: sticky;
left: 0;
}
.fixed2 {
position: sticky;
left: 120px;
}

我想要的是头也粘稠。

任何帮助将不胜感激。谢谢！

Answer 1

css

thead th { position: sticky; top: 0; }

.html

<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>

Answer 2

将表固定类提供给表标记并尝试此操作：

.table-fixed{
width: 100%;
tbody{
height:200px;
overflow-y:auto;
width: 100%;
}
thead,tbody,tr,td,th{
display:block;
}
tbody{
td{
float:left;
}
}
thead {
tr{
th{
float:left;
}
}
}
}