我希望我的表格具有固定的 thead 和可滚动的 tbody。我对其应用了以下 CSS:
thead, tbody {
display: block;
}
tbody {
height: 383px;
overflow-y: auto;
overflow-x: auto;
}
应用上面的 css 后,thead
得到修复,tbody
可滚动。但是 thead
的数据与 tbody
不一致。即使表格右侧还有很多空间,这意味着 tr
元素没有填满其容器的整个空间。
谁能帮我解决这个问题?
最佳答案
您可以使用 position: sticky
来卡住您的 th
单元格:
.container {
position: relative;
margin-top: 2vh;
height: 90vh;
overflow: auto;
}
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
border-top: none;
}
th {
position: sticky;
top: 0;
background: black;
padding: 3px;
color: white;
}
<div class="container">
<table>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</tbody>
</table>
</div>
关于css - 在使 thead 固定且 tbody 可滚动后,thead 和 tbody 未正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59262410/