如何使用 CSS 创建具有固定标题的可滚动表格？

使用 CSS 创建具有固定标题的可滚动表格

当创建由于数据过多而需要滚动的表格时，使用表头固定，数据行独立滚动。本文将提供使用 CSS 实现此目的的详细解决方案。

解决方案

要创建具有固定标题的可滚动表格，必须将标题元素与使用 的数据行和标签。然后可以应用 CSS 样式来控制其显示和滚动行为。

CSS 样式：

table tbody, table thead {
  display: block;
}

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

th {
  width: 72px;
}

td {
  width: 72px;
}

上的 display: block 属性和将 header 和 body 元素分开，允许它们独立运行。溢出：

上的自动和高度启用数据行的滚动。为两个设置静态宽度。和以确保对齐。

注意： 确保

标签用于标题行和数据行。

增强对列宽的控制：

对于具有不同列宽的表格，使用 CSS 指定最小和最大宽度：

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; }
table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }

此技术提供了对列宽的精细控制，同时保持标题和数据之间的对齐行。

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