先上一张图看下
最终效果:
上代码
<!-- 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头部可自行调整
参考