table表头固定只让内容滚动

原创

IT枫斗者 2024-05-10 09:29:50 博主文章分类：java错误分析 ©著作权

文章标签 html css javascript java 数据库 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者IT枫斗者的原创作品，请联系作者获取转载授权，否则将追究法律责任

table表头固定只让内容滚动

纯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;
    }
  }