css 表头固定有滚动条

CSS表头固定有滚动条是一种常见的设计需求。在表格中，为了方便浏览，我们经常会需要固定表头，而当表格很长的时候，使用滚动条可以更好地控制表格的显示范围。以下是一些CSS实现表头固定且有滚动条的方法。

// HTML代码
<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th>名称</th>
        <th>价格</th>
        <th>库存</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>商品1</td>
        <td>10元</td>
        <td>100件</td>
      </tr>
      <tr>
        <td>商品2</td>
        <td>20元</td>
        <td>200件</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

// CSS代码
.table-container {
  width: 100%;
  height: 200px;
  overflow: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead {
  position: sticky;
  top: 0;
  background-color: #FFF;
}

.table th {
  position: sticky;
  top: 0;
  background-color: #FFF;
  z-index: 1;
  padding: 10px;
  text-align: left;
}

.table td {
  padding: 10px;
  border-bottom: 1px solid #EEE;
}

以上代码实现了一个固定表头并且有滚动条的表格。其中，使用了position: sticky属性可以让表头固定在顶部；使用了overflow: auto属性可以让表格显示滚动条；z-index属性设置表头在上层，保证不会被表格内容盖住。另外，为了让表格更美观，我们也可以设置一些CSS样式来调整表格的边框、字体大小等。

总体来说，CSS表头固定有滚动条是一个比较常见的设计需求，使用CSS能够很好地实现这个目标，同时还可以增强页面的可读性和美观度。