怎么让table的thead 不动，tbody出现滚动条呢？

要让 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 成为块级元素，并设置最大高度，超出高度的部分会出现垂直滚动条。