如何使用 CSS 创建固定表头？-css教程-PHP中文网

如何使用 CSS 创建固定表头？

Patricia Arquette

发布： 2024-11-13 14:02:02

原创

608 人浏览过

How to Create Fixed Table Headers with CSS?

使用 CSS 固定表头

创建具有固定标题的表可以增强可读性和导航性，尤其是在处理大型数据集时。让我们探索如何使用 CSS 实现此目的：

定义表格结构

表格应包含标题和正文，由表示和分别为元素。每行应该在内元素，包括标题行。

分离标题和正文

要将标题内容与正文分开，请对 thead 和 tbody 使用 display: block。这会将它们与默认的表格布局分离。

将滚动应用到正文

在 tbody 上设置 Overflow: auto 以启用水平滚动，并应用高度来限制可滚动区域。

设置宽度和对齐

设置 th 和 td 的静态宽度以对齐列。确保标题和正文具有相同的总宽度。

附加 CSS

要更好地控制列宽，请使用具有 min-width 和 max 的 nth-child 选择器-宽度属性。这允许在保持对齐的同时改变列大小。

示例代码

以下代码片段演示了具有固定标题的表格：

table {
  width: 100%;
}

table tbody,
table thead {
  display: block;
}

table tbody {
  overflow: auto;
  height: 100px;
}

th,
td {
  width: 100px;
}

登录后复制

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