css table滚动

CSS表格滚动是一种在表格中显示大量数据时，通过设置固定高度和溢出属性来实现滚动效果的方法。以下是实现CSS表格滚动的步骤：

1. 创建一个包含表格的容器元素，可以是`<div>`或其他块级元素。
2. 设置容器元素的高度，并将`overflow`属性设置为`auto`或`scroll`，以便在内容超出容器高度时显示滚动条。
3. 在容器内部创建一个包含表格的元素，例如`<table>`。
4. 设置表格的宽度为100%以适应容器的宽度。
5. 如果需要固定表头，可以将表头放在一个`<thead>`元素中，并设置其样式为固定位置（例如`position: sticky; top: 0;`）。
6. 如果需要固定某些列，可以将这些列放在一个`<colgroup>`元素中，并设置其样式为固定位置（例如`position: sticky; left: 0;`）。
7. 设置表格的布局算法为固定布局（例如`table-layout: fixed;`），以确保表格的列宽度不会随内容变化而改变。
8. 根据需要设置表格和单元格的样式，例如背景色、边框等。

下面是一个示例代码：

<div class="table-container">
  <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>
      <!-- more rows -->
    </tbody>
  </table>
</div>

.table-container {
  height: 300px;
  overflow: auto;
}

table {
  width: 100%;
  table-layout: fixed;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
}

colgroup col:first-child {
  position: sticky;
  left: 0;
  background-color: #f5f5f5;
}