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 可滚动。

相关推荐
无奈何杨4 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭12 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆16 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼25 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子27 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆28 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了28 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆34 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆34 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js