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

相关推荐
dualven_in_csdn1 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅3 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
Jimmy3 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜4 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas
Allen Bright4 小时前
【CSS-9】深入理解CSS字体图标:原理、优势与最佳实践
前端·css
阿芯爱编程5 小时前
最长和谐子序列,滑动窗口
前端·javascript·面试