本博客持续修改与更新中,点击这里查看最新的内容
[TOC]
背景
最近小弟在工作都是做后台系统,一堆的表格,各种各样的。然后需求上要有固定的表头的表格,如下图所示
在网上查询固定表头的实现方式为:
thead
设置为fixed
- 拆分表格为两个表格
thead
一个,tbody
一个
然而上面的实现上有个条件是要提前设置单元格的大小 , 如果没有设置对的会就是下面这个样子(下面是其它的博主的例子图, 我盗用下 :smirk: )
:expressionless::expressionless::expressionless::expressionless: 我可不要固定单元格宽度,固定的宽度怎么做组作啊。。。
在css3中的transform
不会改变原来元素的大小位置,相当于是复制了份出来,然后transform的计算速也够快(这里婊一下absolute加left ,top,经常慢半拍)。用这个做这个功能非常合适,还要加点js用于监听滚轮。
实现方式
运行我写的 在线例子 打不开,请使用科学上网*:smirk::smirk::smirk:
height="600" width="100%" src="https://embed.plnkr.co/k7ipmtXkpL0MDT9KGZbc/" allowfullscreen="">下面贴下代码
js:
// Code goes here
'use strict'
window.onload = function(){
var tableCont = document.querySelector('#table-cont')
/**
* scroll handle
* @param {event} e -- scroll event
*/
function scrollHandle (e){
console.log(this)
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle)
}
css:
/* Styles go here */
.table-cont{
/**make table can scroll**/
max-height: 200px;
overflow: auto;
/** add some style**/
/*padding: 2px;*/
background: #ddd;
margin: 20px 10px;
box-shadow: 0 0 1px 3</