固定标题的纯 CSS 解决方案
问题：
创建一个带有固定标题的可滚动表格页脚仅使用 CSS 和有效的表格标签，无需 JavaScript 或 jQuery。确保页眉、页脚和内容行之间的列对齐保持一致。
解决方案：
使用位置：粘性
将桌子包裹起来div: 这将定义滚动区域。
div {
display: inline-block;
height: 150px;
overflow: auto;
}应用位置：粘在表格上headers:
table th {
position: -webkit-sticky;
position: sticky;
top: 0;
}样式
将表格外观自定义为需要：
table {
border-collapse: collapse;
}
th {
background-color: #1976D2;
color: #fff;
}
th,
td {
padding: 1em .5em;
}
table tr {
color: #212121;
}
table tr:nth-child(odd) {
background-color: #BBDEFB;
}示例：
<div>
<table border="0">
<thead>
<tr>
<th scope="col">head1</th>
<th scope="col">head2</th>
<th scope="col">head3</th>
<th scope="col">head4</th>
</tr>
</thead>
<tbody>
<!-- Insert rows here -->
</tbody>
</table>
</div>注意：
以上是如何仅使用 CSS 创建具有固定标题的可滚动表格？的详细内容。更多信息请关注PHP中文网其他相关文章！
