table 自定义表格头固定

在写页面的时候，对于一些组件我们会优先选择 UI 组件库，像 Element ui、Vant等等，因为这样能提高我们的开发效率，不必每次都写上繁琐的 dom 和 css。

但是有些时候，这些 UI 组件不是很符合自己的预期，在原有的基础上改动麻烦，不如自己自定义一个组件更方便。

table 表格算是我们开发中经常碰到的，当表格数据量比较多的时候，查看起来需要拉动滚动条，但是太过长的时候没法对照表头，这个时候需要把表头固定，方便对照查看。

position: sticky;

css 中 position 定位属性中有这么一个 sticky，名为粘性定位。它是 css3 新增的，可以用来固定定位，但是在比较旧版本的浏览器是不支持的。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed; ，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

css 复制代码

table {
    display: inline-block;
    height: 100px;
    overflow: auto;
    position: relative;
}
thead {
    background-color: #fff;
    position: sticky;
    top: 0;
}

<table border>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>武器</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>孙悟空</td>
          <td>男</td>
          <td>金箍棒</td>
        </tr>
        ...
      </tbody>
    </table>

这个时候表头就固定起来了

除了使用 sticky，还可以用 js 来做到这种效果

scroll

当表格内容过多，使用 overflow-y: auto; ，超过 table 元素设置的高度时出现滚动条。

然后给 table 元素设置监听 scroll 滚动，监听到操作触发相应的函数，可以给这个函数动态设置表格头的样式。

通过函数内部 this 获取到 table 元素的滚动离顶部的距离，表头设置 transform Y轴移动对应着 table 的滚动距离，滚动了多少，表头位置Y轴就移动多少。

代码如下

html 复制代码

<table id="table" border>
      <thead id="thead">
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>武器</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>孙悟空</td>
          <td>男</td>
          <td>金箍棒</td>
          ...
      </tbody>
    </table>

js 复制代码

let table = document.getElementById('table')
function scrollHandle (e){
  var scrollTop = this.scrollTop;
  // 监听到table元素滑动，设置表头y轴移动值
  document.getElementById('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
table.addEventListener('scroll',scrollHandle)

除去以上两种方法，还可以在html结构上做一些处理，表格分成两个表格，需要固定的表头为一个，表格内容为一个，同样给表格内容过多时，设置 overflow 可滚动。