要让 table 的 thead 固定不动，tbody 出现滚动条，你需要使用 CSS 来控制表格的布局和样式。以下是一种常见且有效的方法：
<!DOCTYPE html>
<html>
<head>
<style>
table {width: 100%;table-layout: fixed; /* 重要：固定表格布局 */border-collapse: collapse; /* 可选：合并表格边框 */
}thead th {position: sticky; /* 使 thead 固定 */top: 0; /* 固定在顶部 */background-color: #f0f0f0; /* 可选：设置背景颜色 */
}tbody {display: block; /* 重要：使 tbody 成为块级元素 */max-height: 200px; /* 设置 tbody 的最大高度 */overflow-y: auto; /* 出现垂直滚动条 */
}tr {border-bottom: 1px solid #ddd; /* 可选：设置行边框 */
}th, td {padding: 8px;text-align: left; /* 可选：设置文本对齐方式 */
}
</style>
</head>
<body><table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><!-- ... more rows ... --><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody>
</table></body>
</html>
关键 CSS 属性解释：
-
table-layout: fixed;: 这是非常重要的，它让表格的宽度固定，并且根据表格宽度和列宽度来分配单元格宽度，而不是根据单元格内容。这可以防止内容过长导致表格变形，并且使滚动条正常工作。 -
thead th { position: sticky; top: 0; }: 这会使thead的th元素固定在顶部。sticky定位结合top: 0会让表头在滚动到顶部时固定。 -
tbody { display: block; max-height: 200px; overflow-y: auto; }: 这会使tbody成为块级元素，并设置最大高度，超出高度的部分会出现垂直滚动条。
其他说明：
max-height的值可以根据需要调整。- 可以根据需要添加其他样式，例如边框、背景颜色等。
- 这种方法兼容性较好，适用于大多数现代浏览器。
这个例子提供了一个基本的框架，你可以根据自己的需求进行修改和调整。 记住，table-layout: fixed; 和 display: block; 对于实现这个效果至关重要。
