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宽度百分比