如何使用 CSS 制作带有固定标题的可滚动表格？

如何在 CSS 中制作具有固定标题的可滚动表格

增强具有固定标题的表格，同时保持可滚动正文是 Web 开发中的常见要求。本文将深入研究使用 CSS 的全面解决方案。

问题

在提供的场景中，可滚动容器中的表格在滚动时难以保留其标题。根本问题源于表头和正文密不可分，导致它们一起滚动。

解决方案

解决这个问题的关键在于将表头（和表头）分开。 ) 来自它的主体 (

)。通过为两个元素设置 display: block，我们打破了它们的内在联系，使它们能够独立运行。

要向正文引入滚动功能，请分配 Overflow: auto 并指定所需的高度。此外，为了防止标题在滚动过程中漂移，请使用 CSS 修复其宽度。

代码片段

table tbody, table thead {
    display: block;
}

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

th {
    width: 72px;
}

td {
    width: 72px;
}

其他注意事项

• 缺少 HTML元素： 确保所有行都包含在 内元素，包括标题行。
• 列宽控制：要在保持对齐的同时对列宽进行细微控制，请考虑使用以下代码：

table th:nth-child(1), td:nth-child(1) { min-width: 50px; max-width: 50px; }
table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
/* ... and so on for each subsequent column */

结论

通过分离表头和表体并实现上述CSS属性，我们成功创建了一个具有固定表头的可滚动表，满足原始查询的要求。

以上是如何使用 CSS 制作带有固定标题的可滚动表格？的详细内容。更多信息请关注PHP中文网其他相关文章！