css3实现固定表格头部而无需设置单元格td的宽度

本博客持续修改与更新中，点击这里查看最新的内容

** 已知在移动端和safairi 都没有 软用，大家看看就好，有好的方式可以说下 **
[TOC]

背景

最近小弟在工作都是做后台系统，一堆的表格，各种各样的。然后需求上要有固定的表头的表格，如下图所示

table-thead-fixed

在网上查询固定表头的实现方式为：

• thead 设置为 fixed
• 拆分表格为两个表格 thead一个，tbody一个

​然而上面的实现上有个条件是**要提前设置单元格的大小 **， 如果没有设置对的会就是下面这个样子（下面是其它的博主的例子图， 我盗用下 :smirk: ）

​:expressionless::expressionless::expressionless::expressionless: 我可不要固定单元格宽度，固定的宽度怎么做组作啊。。。

在css3中的transform不会改变原来元素的大小位置，相当于是复制了份出来，然后transform的计算速也够快（这里婊一下absolute加left ，top，经常慢半拍）。用这个做这个功能非常合适，还要加点js用于监听滚轮。

实现方式

运行我写的 在线例子 打不开，请使用科学上网*:smirk::smirk::smirk:

下面贴下代码

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 3px #ddd;
}
thead{
  background-color: #ddd;
}

html：

  
    
    
    
  

  
  

    
   

      

        

          
#
          
First Name
          
Last Name
          
Username
        
      
      

        

          
1
          
Mark
          
Otto
          
@mdo
        
        

          
2
          
Jacob
          
Thornton
          
@fat
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
        

          
3
          
Larry
          
the Bird
          
@twitter
        
      
    
  
  

table-thead-fixed

搞定,美滋滋:thumbsup::thumbsup::thumbsup:

不支 iframe和emoji吗？ 不开心