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

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

在没有 JavaScript 的情况下创建具有固定标题和固定第一列的表格会带来挑战移动浏览器。本文探讨了一种基于纯 CSS 的解决方案，可以有效地实现此功能。

使用 CSS Sticky 定位的解决方案：

现代网络浏览器支持position: Sticky 属性，该属性允许元素水平（左/右）或垂直（上/下）粘附到其包含块的特定边缘。利用这个属性，我们可以实现固定的表头和固定的第一列。

实现步骤：

1. 创建容器： 将表格放置在将处理滚动的容器元素内。
2. 启用在容器上滚动：指定溢出：在容器上滚动以启用水平/垂直滚动。
3. 粘住标题和第一列单元格：对表格标题使用粘性定位（第）粘在顶部，第一列单元格（tbody th）粘在left.
4. 修复左列上的标题：要确保第一列中的标题单元格保持固定，请在 thead th:first-child 上设置 left: 0 和 z-index: 2。 Z-index 用于确保标题单元格保持在 tbody 样式中模拟边框的顶部。
5. 模拟第一列的边框： 浏览器倾向于删除粘性元素上的边框。为了解决这个问题，我们在 tbody 上使用 box-shadow 来模拟 border-right。

CSS 代码：

/* Enable scrolling on container */
div.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

/* Stick header cells to top */
thead th {
  position: sticky;
  top: 0;
}

/* Stick first column cells to left */
tbody th {
  position: sticky;
  left: 0;
}

/* Stick first column header cell on the left */
thead th:first-child {
  left: 0;
  z-index: 2;
}

/* Emulate border for first column */
tbody th {
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

结论:

通过结合滚动容器和粘性定位，我们可以创建一个固定的表头和固定第一列，无需依赖 JavaScript。该解决方案受到现代浏览器的广泛支持，并在桌面和移动设备上提供流畅的滚动体验。

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