如何在使用 CSS 滚动时保持表头固定？

表头粘性 CSS - Chrome、FF、Edge

当您有一个表格，其中表格主体中包含的数据可能会溢出并且您想要表格标题时要保持在视图中，可以使用 CSS。一个简单的解决方案，只需要一点CSS，不需要JavaScript，需要使用position：sticky，并适当设置top属性。

下面的示例使用tableFixHead的表格类来确保表格适合该容器内部设置为“overflow: auto”。这将允许表的主体在容器内溢出，而表头保持静止。

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

在表本身内部，您可以看到表头元素现在设置为位置：sticky 。这意味着当它们到达容器的顶部时，它们将粘在容器的顶部，而不是与其余数据一起滚动。

<div>

如果您要复制此示例，您将看到滚动时标题保持静止，使用户可以轻松查看表数据的列名称。

以上是如何在使用 CSS 滚动时保持表头固定？的详细内容。更多信息请关注PHP中文网其他相关文章！