如何实现头部固定的table表格

日常开发中我经常会遇到table固定表头的功能，从来没系统性的记录过，导致每次开发的时候都会忘记，因此开了一篇帖子去记录下这次开发该功能的完整记录

代码结构如下

html

<table class="tableList">
    //表头
  <thead class="thead">
    <tr>
      <th></th>
    </tr>
  </thead>
  //表体可滚动部分
  <tbody class="tbody" ref="tbodys">
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

css

.tableList {
    flex: 1;
    .tbody {
      background: unset;
      display: block;
      overflow: auto;
    }
    .tbody,.thead {
      background: linear-gradient(180deg, #204375 11%, rgba(6,18,24,0) 97%);
      opacity: 1;
      height: 72px;
      tr{
        width:100%;
        display: table;
        table-layout: fixed;/**表格列的宽度由表格宽度决定，不由内容决定*/
        height:36px;
        text-align: center;
        border-bottom: 1px dashed #4B73AC;
        background: #0A1A34;
        th,td{
          font-size: 12px;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          color: #FFFFFF;
        }
      }
    }
  }

将tbody设置为块级元素后overflow: auto;才能奏效

如果将 table 标签的 display 属性设置为默认值 table，那么任何设置 overflow 属性可能会导致出现问题。这是因为表格的布局方式不同于其他块级元素，也不同于内联元素，会影响默认情况下 overflow  值如何应用到表格上。

补充说明，当 table 的 display 属性值为 table 时，overflow 属性值也可以应用到 td 标签上。但是，这可能会导致表格出现意外的滚动条，特别是在包含 colspan 或 rowspan 属性的单元格或跨行跨列时。

所以，将 table 标签的 display 属性设置为 block，然后将 overflow 属性设置为 auto，是一种更安全的方式，兼容主流浏览器，可以正确地控制表格内部的滚动条和溢出内容。