css table 表头不动 内容滚动

要实现表头不动，内容可滚动的效果，可以使用 CSS 的表格布局和固定定位。

首先，将表格布局设置为固定布局 `table-layout: fixed;`，然后将表头设置为固定定位 `position: fixed;`，并设置表头的宽度和每列单元格的宽度相同。

接着，将表格内容设置为相对定位 `position: relative;`，并设置表格内容的高度和 `overflow-y: scroll;`，即可在表头不动的情况下，让表格内容可滚动。

HTML 代码如下：

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <!-- more rows -->
  </tbody>
</table>

CSS 代码如下：

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

thead th {
  position: fixed;
  top: 0;
  height: 50px;
  background-color: #fff;
  border: 1px solid #ddd;
  text-align: left;
  width: 100px; /* 每列单元格的宽度 */
}

tbody {
  position: relative;
  display: block;
  height: 300px; /* 表格内容的高度 */
  overflow-y: scroll;
}

tbody tr {
  border-bottom: 1px solid #ddd;
}

td {
  border: 1px solid #ddd;
  padding: 10px;
  width: 100px; /* 每列单元格的宽度 */
}

这样就可以实现表头不动，表格内容可滚动的效果了。