A fixed table header scrolling content

A lot check method, two tables are written to achieve, a table header contents of a table. But the pages are written not want to change, they were directly own use css control. Drawbacks: inconvenient to apply to multiple pages. Because th td width required fixed. Is not fixed directly to the screen width of the aliquot. So, something more needs to manually control the width of the column. Directly on the code, because the project company, so. .

<div>
	<div class="table-head">
		<table id="contentTable">
			<thead>
				<tr>
					<th><input type="checkbox"/></th>
					<th>xxxxx</th>
					<th>xxxxx</th>
					<th>证件号码</th>
					<th>姓名</th>
					<th>性别</th>
					<th>xxxxx</th>
					<th>出生日期</th>
					<th>xxx</th>
					<th>xxx</th>
					<th>ssss</th>
					<th>xxxx</th>
					<th>ccccc手机</th>
					<th>家庭住址</th>
					<th>xxxxx</th>
					<th>xxxxx</th>
					<th>xxxxx</th>
					<th>修改日期</th>
				</tr>
			</thead>
			<tbody>
				<tr>
                        //18个td  省略
                    </tr>				
			</tbody>
		</table>
	</div>
</div>

/** 这是css */
body{overflow-y: hidden}
#contentTable tbody { display: block; height: 520px; overflow-y: scroll; }
#contentTable thead,
#contentTable tbody tr { display: table; width: 100%; table-layout: fixed; /**表格列的宽度由表格宽度决定，不由内容决定*/ text-align: center; }

/**每一个th都要和对应的td宽度相同，如果不设置，则默认均分宽度，我设置的都是一些内容较多的，比如说身份证号码，电话，住址等*/
#contentTable tr th:nth-of-type(1),#contentTable tr td:nth-of-type(1){width: 1.5%;}
#contentTable tr th:nth-of-type(2),#contentTable tr td:nth-of-type(2){width: 8.5%;}
#contentTable tr th:nth-of-type(3),#contentTable tr td:nth-of-type(3){width: 7%;}
#contentTable tr th:nth-of-type(4),#contentTable tr td:nth-of-type(4){width: 8.5%;}
#contentTable tr th:nth-of-type(8),#contentTable tr td:nth-of-type(8){width: 5%;}
#contentTable tr th:nth-of-type(9),#contentTable tr td:nth-of-type(9){width: 5%;}
#contentTable tr th:nth-of-type(12),#contentTable tr td:nth-of-type(12){width: 8.5%;}
#contentTable tr th:nth-of-type(13),#contentTable tr td:nth-of-type(13){width: 6%;}
#contentTable tr th:nth-of-type(14),#contentTable tr td:nth-of-type(14){width: 15%;}
#contentTable tr th:nth-of-type(16),#contentTable tr td:nth-of-type(16){width: 5%;}
#contentTable tr th:nth-of-type(18),#contentTable tr td:nth-of-type(18){width: 5%;}

/**这一个重要：写完上面的看效果应该是表头和内容对不齐。我们需要的是调节0.4em中的0.4，试着变大变小就能看到区别，我试了，刚好跳到0.4，所有的列都能垂直对齐*/
#contentTable thead { width: calc( 100% - 0.4em);/*表头与表格垂直对齐*/ }