如何仅使用 CSS 创建具有固定标题和固定列的表格？

使用纯 CSS 的具有固定标题和固定列的表格

简介：

创建具有固定标题和固定列的表格固定的第一列可以为查看超出可见视口的大型数据集或表格提供稳定且简化的用户体验。传统上，JavaScript 或 jQuery 已用于此目的。但是，这可能会在移动浏览器上遇到性能问题。本文探讨了一种纯 CSS 解决方案来实现此功能，同时保持平滑滚动。

使用 CSS 粘性定位：

CSS 位置：粘性属性允许元素粘在当滚动超过某个点时，顶部、侧面或两者。应用此属性可以实现固定标题和固定列的效果。

步骤：

1. 将表格包裹在容器中： 创建一个 div 容器来容纳表格。
2. 在容器： 应用溢出：滚动；到容器元素。
3. 将标题粘贴到顶部： 使用position: Sticky 和 ​​top: 0 定位标题行（thead tr）;。
4. 将第一列粘到一边： 定位第一列单元格（tbody td:first-child 或 tbody th:first-child) usingposition:sticky and left:0;.
5. 应用样式来改善外观：通过为表、标题和列元素添加样式来增强视觉吸引力.

额外注意事项：

• 容器尺寸： 确保容器具有适当的 max-width 和 max-height 属性以限制滚动。
• z -index: 使用z-index来控制sticky的重叠顺序
• 浏览器支持： 现代版本的 Chrome、Firefox 和 Edge 支持position: Sticky 属性。

示例代码：

.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

thead th {
  position: sticky;
  top: 0;
}

tbody td:first-child, tbody th:first-child {
  position: sticky;
  left: 0;
}

/* Styling */

thead th {
  background: #000;
  color: #FFF;
  z-index: 1;
}

tbody td, tbody th {
  padding: 0.5em;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

结论：

利用 CSS 粘性定位，可以实现表格中固定表头和固定第一列的效果无需借助 JavaScript。该解决方案提供了纯基于 CSS 的方法，可确保平滑的滚动性能，尤其是在移动浏览器上。

以上是如何仅使用 CSS 创建具有固定标题和固定列的表格？的详细内容。更多信息请关注PHP中文网其他相关文章！