html table表头不变滚动表体

table 需要出现纵向滚动条时，大多数情况会在table外面包一层div 设置css属性  overflow:auto 来实现table出现滚动条但这样做有个问题，滑动表格是移动整体 表头也会被移动。

解决办法有如下

1、 设置table  表头和表体

关键css

.table{
width: 100%;
border-collapse:collapse;
border-spacing:0;
}
.fixedThead{
display: block;
width: 100%;
}
.scrollTbody{
display: block;
height: 262px;
overflow: auto;
width: 100%;
}
.table td,.table th {
width: 200px;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}

// html代码

<table class="table">
<thead class="fixedThead">
<th>header</th><th>header two</th>
</thead>
<tbody class="scrollTbody">
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>

</tbody>
</table>

// 3个Table 主、表头、表体

<table width="100%" align="center" border=0>
<tr>
<table  width="100%"  border=1>
<tr>
<td width="20%">
biaoti1321
</td>
<td width="20%">
biaoti2321321
</td>
<td width="20%">
biaoti2321321
</td>
<td width="20%">
biaoti2321321
</td>
<td width="20%">
biaoti2321321
</td>

</tr>
</table>
</tr>
<tr>
<td align="center" width="100%">
<div  style="overflow-y:auto; width:100%;height:100px">
<table width="100%" border=1>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</table>

存在一个问题 如果表头个数为奇数时  不好设置td宽度百分比