table表格实现滚动

要实现一个可滚动的表格，可以使用 HTML 和 CSS 实现。下面是一个简单的示例：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
      </tr>
      <!-- more rows... -->
    </tbody>
  </table>
</div>

CSS：

.table-container {
  height: 200px; /* 设置容器高度 */
  overflow-y: scroll; /* 设置垂直滚动 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid black;
}

这个示例中，我们将表格放在一个具有固定高度和垂直滚动的 div 容器中。如果表格内容超过了容器高度，就会出现滚动条。这样，表格的头部（即 thead）将保持固定，而表格的主体部分（tbody）会滚动。CSS 的 border-collapse 属性将单元格边框合并为一个，使表格看起来更整洁。