用css实现thead随着滑动条滚动的table

时间	用户名称	品类	型号	数量
1111	1111	111	111	多复制几行可以看出效果

table {
  width: 100%;
  height: 300px;   
  thead {
   //thead留出滚动条宽度，以便和tbody对齐
    width: calc( 100% - 1em );      
    height: 50px;
    line-height: 50px;
    display:table;
    width:100%;
    table-layout:fixed;
    th {
      text-align: center;   
    }
  }
  tbody {
    overflow-y: scroll;
    /*thead的display默认属性是：table-header-group,
     *设置为block后才能出现滚动条*/         
    display: block;        
    height: 300px;
    tr {
      height: 50px;
      line-height: 50px;
      /*因为thead的display默认属性是：table-header-group，
       *跟tbody的table-row-group是配套使用的。现在你把他们其中一个改了，
       *自然就不再对齐了。
       *所以以下两步是非常关键的*/
      display:table;
      table-layout:fixed;
      width:100%;          
      text-align: center;          
    }
  }
}
//样式用的是sass语法