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>