如何创建具有固定标题的纯 CSS 可滚动表？

具有固定页眉的仅 CSS 滚动表

在这个问题中，用户寻求使用 CSS 创建具有固定页眉和页脚的可滚动表格仅有的。他们的具体要求包括：

• 保持页眉、页脚和内容行之间的列对齐
• 保持页眉和页脚固定，同时允许内容垂直滚动
• 仅通过 HTML 表格标签和 CSS 规则来完成此任务
• 确保跨浏览器兼容性

答案

一种可能的解决方案是利用position: Sticky 属性。根据 W3C，position:sticky 通过滚动框定义元素相对于其祖先的位置，如果没有祖先滚动，则使用视口。

但是，某些浏览器（例如 Chrome、IE、Edge）遇到了问题分配位置时：粘到表格标题行（ 或 ）。另一种似乎适用于表格的方法是将其分配给表格单元格（）。

为了达到所需的效果，用户可以考虑使用以下代码：

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

这段代码将表格包装在一个div中，并使用overflow: auto来建立一个可滚动区域。表格标题被分配了一个粘性位置，确保它们在内容垂直滚动时保持固定。

附加美学样式

该代码段包含附加 CSS 样式以增强表格的外观，但这些美观对于具有固定标题的可滚动表格的主要功能来说并不是必需的。

以上是如何创建具有固定标题的纯 CSS 可滚动表？的详细内容。更多信息请关注PHP中文网其他相关文章！