bootstrap中自定义table 表头固定 表体出现滚动条

先上一张图看下
最终效果：
上代码

<!-- Table head -->
			<table class="table tableHead">
				<thead>
					 <tr>
						<th id="changeName" style="width: 169px;"></th>
						<th style="width: 250px;">id</th>
						<th style="width: 249px;">姓名</th>
						<th style="width: 249px;">性别</th>
						<th style="width: 192px;">年龄</th>
						<th style="width: 192px;"></th>
					</tr>
				</thead>
			</table>
			<!-- Table body -->
			<div class="pre-scrollable tableBody">
				<table class="table" style="margin-bottom: 0px;"> 
					<tbody id="bodyData" style=" overflow-y:scroll; height:100px;">
						<tr>
						   	<td>1</td>
						    <td>赵</td>
						    <td>男</td>
					    	<td>12</td>	
					    	<td><a href="javascript:checkOrder();">选择</a></td>	
					    </tr>
						<tr>
						   	<td>2</td>
						    <td>钱</td>
						    <td>男</td>
					    	<td>15</td>	
					    	<td><a href="javascript:checkOrder();">选择</a></td>	
					    </tr>
						<tr>
						   	<td>3</td>
						    <td>孙</td>
						    <td>女</td>
					    	<td>16</td>	
					    	<td><a href="javascript:checkOrder();">选择</a></td>	
					    </tr>
						<tr>
						   	<td>4</td>
						    <td>李</td>
						    <td>男</td>
					    	<td>14</td>	
					    	<td><a href="javascript:checkOrder();">选择</a></td>	
					    </tr>
						<tr>
						   	<td>5</td>
						    <td>周</td>
						    <td>女</td>
					    	<td>15</td>	
					    	<td><a href="javascript:checkOrder();">选择</a></td>	
					    </tr>
						<tr>
						   	<td>6</td>
						    <td>吴</td>
						    <td>男</td>
					    	<td>15</td>	
					    	<td><a href="javascript:checkOrder();">选择</a></td>	
					    </tr>
					</tbody>
				</table>
			</div>

css

.tableHead{
	border: 1px solid #ddd;
}
.tableHead th{
	border-right: 1px solid #ddd;
}
.tableBody{
	height: 188px;
	margin-top: -22px;
	border: 1px solid #ccc; 
}
.tableBody table td{
	border-right: 1px solid #ddd;
}

end
table头部可自行调整
参考