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

具有固定标题的纯 CSS 滚动表格

挑战：

目标是创建一个具有固定标题的可滚动表格标头仅使用CSS，确保跨浏览器兼容性并满足以下要求标准：

• 保持页眉、页脚和内容行之间的列对齐
• 在内容垂直滚动时保持页眉和页脚固定
• 避免依赖 JavaScript 或 jQuery
• 仅使用提供的表标签（table、colgroup、col、thead、tbody、 tfoot, tr, th, td)

使用 Position: Sticky 的解决方案：

在实施此解决方案之前应检查对position: Sticky 的支持。根据 W3C，粘性定位框的定位方式与相对定位框类似。但是，如果没有祖先具有滚动框，则偏移量是相对于最近的具有滚动框或视口的祖先来计算的。

此行为与静态标头的行为一致。将粘性位置属性分配给表格单元格元素 (th)。由于表格不是遵循其指定大小的块元素，因此使用包装元素来定义滚动溢出。

示例：

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

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

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