CSS 创建固定头部滚动水平条

在本文中，我们将介绍如何使用CSS创建一个固定的头部，在滚动时水平滚动条也能同时滚动。

阅读更多：CSS 教程

使用position: fixed创建固定头部

要创建一个固定的头部，我们可以使用CSS中的position: fixed属性。这会使元素相对于浏览器窗口的视口固定位置。我们可以将该属性应用于一个包含头部的容器元素。

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  z-index: 999;
  overflow: scroll;
}

在上述示例中，我们创建了一个.container的CSS类，用于包含整个固定头部。通过设置position: fixed以及top: 0和left: 0，我们让容器元素固定在页面的左上角。width: 100%会使容器元素占据整个浏览器窗口的宽度。

你还可以根据需要进行自定义。比如，你可以为头部容器设置背景颜色、内边距等样式。

使用overflow: scroll实现水平滚动

要使固定的头部在水平方向上滚动，我们可以通过为头部容器元素设置overflow: scroll样式。这将创建一个水平滚动条，并且当内容超出容器宽度时，用户可以通过滚动进行查看。

.container {
  /* ... */
  overflow: scroll-x;
}

在上述示例中，我们将overflow样式的值设置为scroll-x，这会只在水平方向上出现滚动条。用户可以通过滚动条滚动来查看超出容器宽度的内容。

示例

下面是一个示例，展示了如何使用CSS创建一个固定的头部，在滚动时水平滚动条也能同时滚动。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 20px;
      z-index: 999;
      overflow: scroll-x;
    }

    .table {
      width: 1000px;
      table-layout: fixed;
    }

    th, td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>职业</th>
          <th>工作经验</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>25</td>
          <td>男</td>
          <td>工程师</td>
          <td>3年</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>女</td>
          <td>设计师</td>
          <td>5年</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>35</td>
          <td>男</td>
          <td>销售员</td>
          <td>8年</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div style="height: 1000px; margin-top: 100px;">
    <!-- 此处添加大量内容以产生滚动效果 -->
  </div>
</body>
</html>

在上述示例中，我们使用了一个包含表格的容器元素。通过将容器元素的position属性设置为fixed，我们将整个表格头部固定在页面上方。然后，我们通过为容器元素设置overflow: scroll-x来创建一个水平滚动条。

在表格的样式中，我们将表格宽度设置为1000像素，并使用table-layout: fixed确保表格列宽度固定不变。每个表头单元格都具有水平对齐方式，以及一个底部边框。

最后，我们在页面中添加了一些内容，以便产生滚动效果。