css固定table表头的实现代码可同时看到表头和表格底部

要实现固定table表头，可以使用css的position属性将表头固定在页面上方，同时使表格内容可以滚动。这里提供两种实现方式：

要实现固定table表头，可以使用css的position属性将表头固定在页面上方，同时使表格内容可以滚动。这里提供两种实现方式：

使用表格布局

代码示例：

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>24</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>28</td>
        <td>男</td>
      </tr>
      <!-- 此处省略部分内容 -->
    </tbody>
  </table>
</div>

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

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

解析：这里使用一个div包裹table，设置一个高度和垂直滚动条。然后给thead设置position: sticky和top: 0，让表头固定在页面顶部。这种实现方式支持多种表格布局，但是有些浏览器不支持sticky属性。

使用flex布局

代码示例：

<div class="table-wrapper">
  <div class="header">
    <div class="col">姓名</div>
    <div class="col">年龄</div>
    <div class="col">性别</div>
  </div>
  <div class="content">
    <div class="row">
      <div class="col">张三</div>
      <div class="col">24</div>
      <div class="col">男</div>
    </div>
    <div class="row">
      <div class="col">李四</div>
      <div class="col">28</div>
      <div class="col">男</div>
    </div>
    <!-- 此处省略部分内容 -->
  </div>
</div>

.table-wrapper {
  height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
}

.col {
  flex: 1;
}

.row {
  display: flex;
}

解析：这里使用flex布局实现固定表头。将表头和表格分别放在两个子元素(header和content)里面，给表格容器设置一个height和overflow-y: auto，实现竖直方向上的滚动。然后给header和content都设置display: flex，表头中每一列使用.flex: 1的flex属性来平分容器宽度，内容中每一行使用display: flex来实现行内元素的等分。