如何使用 CSS 和固定标题制作可滚动表格

在 Web 开发中，通常需要创建包含大量数据的表格需要滚动。然而，在滚动表格主体的同时保持固定的标题可能具有挑战性。以下是实现此效果的方法：

HTML 结构

首先，我们必须确保 HTML 结构正确。我们有一个带滚动条的外部 div，一个包含表格的内部 div，表格标题应位于 元素内，表格数据应位于

 
CSS 样式
现在，我们需要使用 CSS 来设置表格样式：
/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}
其他注意事项
确保所有标题和数据单元格都包含在 
 元素中，以便正确对齐。如果您想要改变列宽，请使用CSS中的nth-child选择器。
注意：这种方法适合较小的表格。对于非常大的表，请考虑使用不同的技术，例如虚拟化或第三方库。