要让 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; 对于实现这个效果至关重要。