css如何控制表头固定-代码示例

温馨提示：这篇文章已超过293天没有更新，请注意相关的内容是否还可用！

CSS如何控制表头固定-代码示例

在网页开发中，有时我们需要将表格的表头固定在页面顶部，以便用户在滚动页面时仍能看到表头，提高数据的可读性和用户体验。下面我将介绍一种使用CSS来实现表头固定的方法，并给出相应的代码示例。

我们可以使用CSS的position属性来控制表头的固定定位。通过将表头的position属性设置为fixed，可以使其脱离文档流并固定在页面上。接下来，我们还需要设置表头的top属性来指定其距离页面顶部的距离。例如，我们可以将top属性设置为0，使表头与页面顶部对齐。

下面是一个简单的示例代码，演示了如何使用CSS控制表头固定：


<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  background-color: #f2f2f2;
  text-align: left;
  padding: 8px;
}
td {
  border: 1px solid #ddd;
  padding: 8px;
}
.fixed-header {
  position: fixed;
  top: 0;
}
</style>
</head>
<body>
<div style="height: 200px; overflow-y: scroll;">
  <table>
    <thead class="9c23-192e-d899-ff16 fixed-header">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>男</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>28</td>
        <td>女</td>
      </tr>
      <!-- 更多数据行... -->
    </tbody>
  </table>
</div>
</body>
</html>