使用 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中文网其他相关文章!