table 自定义表格头固定

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

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

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

position: sticky;

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

  • 粘性定位的元素是依赖于用户的滚动,在 position:relativeposition: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 可滚动。

相关推荐
啊~哈17 分钟前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
小小小小宇43 分钟前
前端小tips
前端
小小小小宇1 小时前
二维数组按顺时针螺旋顺序
前端
安木夕1 小时前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net
努力敲代码呀~1 小时前
前端高频面试题2:浏览器/计算机网络
前端·计算机网络·html
高山我梦口香糖2 小时前
[electron]预脚本不显示内联script
前端·javascript·electron
神探小白牙2 小时前
vue-video-player视频保活成功确无法推送问题
前端·vue.js·音视频
Angel_girl3192 小时前
vue项目使用svg图标
前端·vue.js
難釋懷2 小时前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo2 小时前
Ajax入门
前端·ajax·okhttp