css3实现固定表格头部而无需设置单元格td的宽度（代码分析）

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：

<p class='table-cont' id='table-cont'>
    <table class="table table-striped"> 
             <thead> 
                     <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> 
             </thead> 
              <tbody> 
                        <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr>
                      <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td></tr> 
                 </tbody> 
     </table> 
  </p>