CSS设置table下只有tbody的展现滚动条，表头不动

直接上代码，大家可以参考下

<style type="text/css">
	table tbody {
	    display:block;
	    height:314px;
	    overflow-y:scroll;
	    -webkit-overflow-scrolling: touch; 
	}
	/* tbody的滚动条是否显示 */
	table tbody::-webkit-scrollbar {
	     display: block;
	 }
	table thead, tbody ,tfoot,tr {
	    display:table;
	    width:100%;
	    table-layout:fixed;
	}
	/* 	调节table的表头和下方表格的列是否能对齐 */
	table thead {
	    width: calc( 100% - 0.7em )
	}
	table thead th{ background:#ccc;}
	table tr td{
		height:72px;
	}
</style> 
 
<table  id="tables">
	<thead>
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody id="data-items">
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
        <tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
        <tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
        <tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
        <tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
    </tbody>
	<tfoot>
		<tr>
			<td style="background: #f0f3f5;height:70px;">合计</td>
			<td colspan="2"  id="total" style='text-align: right;height:70px;'>0.00</td>
			<td align="center" style="background: #f0f3f5;height:70px;">金额合计(大写)</td>
			<td colspan="2" class="p-l-15 total" id="totalM" style="height:70px;">零元整</td>
		</tr>
	</tfoot>
</table>