table表头固定只让内容滚动

最新推荐文章于 2024-08-21 14:23:14 发布

2³

最新推荐文章于 2024-08-21 14:23:14 发布

阅读量4.5k

点赞数 7

本文链接：https://blog.csdn.net/weixin_45284564/article/details/125801130

版权

关键词由CSDN通过智能技术生成

本文介绍了如何使用CSS中的position:sticky属性来实现表格中表头固定，tbody部分滚动的效果。通过设置table外层div的高度并启用overflow-y:auto，以及对thead的th应用position:sticky和top:-1px，可以创建一个动态的表头，当tbody滚动时，表头始终保持可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯css实现表头固定，只tbody滚动

需要用到粘性固定属性 – position:sticky

position:sticky 用法：默认情况下，其表现为relative，在视窗与设置了该属性的元素之间，达到或超过其预设的 top、bottom、left、right，本属性会转变成 fixed，使 sticky 固定。

html结构：table外面需要包一层div

  <div class="table-box">
    <table>
      <thead>
        <tr>
          <th class="text-center">序号</th>
          <th class="text-center">名称</th>
          <th class="text-center">电话</th>
          <th class="text-center">备注</th>
          <th class="text-center">录入时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in [1,2,3]">
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
      </tbody>
    </table>
  </div>

css是最关键的，需要分别对table自身和其父便签设置样式

// table父标签: 需要设置固定高度
  .table-box {
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ddd;
  } 

// table表格样式
  table {
    width: 100%;
    table-layout: fixed;
    
    thead th {
      position: sticky;
      top: -1px;
      z-index: 10;
    }
  }