如何在保持标题固定的情况下向 HTML 表格添加滚动条？

在 HTML 表格上显示滚动条

要在 HTML 表格上显示滚动条，请考虑以下方法：

将桌子包裹在一个定位的位置Div

将表格包含在具有相对或绝对位置的 div 元素中。此 div 将充当可滚动区域的容器。

<div>

在 Div 上将“溢出”设置为“自动”

应用 CSS属性溢出：自动到容器div。当表格超出其边界时，这允许内容溢出。

#table-container { Overflow: auto; }

绝对定位表格标题

要在滚动时保持表格标题固定，请绝对定位标题元素。

#table-header {position ：绝对； }

设置容器高度

指定容器div的高度以定义可滚动区域。

#table-container { height: 400 像素； }

示例实现

<div>

#table-container {
  height: 400px;
  overflow: auto;
}

#table-header {
  position: absolute;
}

此方法提供了一个滚动条，同时保持表头固定在顶部。