css实现固定表头

html 增加：

<style type="text/css">
	.table-head{padding-right:17px;background-color:#999;color:#000;}
	.table-body{width:100%;height:300px;overflow-y:scroll;}
	.table-head table,.table-body table{width:100%;}
	.table-body table tr:nth-child(23n+1){background-color:#f2f2f2;}
</style>

导入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)
}

页面

<div style="overflow:scroll;" class='table-cont' id='table-cont'>
	<table id="">
		<thead>
			<tr><th></th><th></th><th></th><th></th></tr>
		</thead>
		<tbody>
			<tr><td></td><td></td><td></td><td></td></tr>
		</tbody>
	</table>
</div>