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：

<div 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> 

  </div>