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

相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法