有个项目需要用到很简单的表格内滚动效果。
找了几个插件，总感觉效果不满意。所以，浪费了一上午时间GOOGLE资料后，决定自己动手定制。
原理，利用tbhead，tbbody,tbfoot 三个层来定位。 tbody来滚动
HTML代码如下：
<div class="tbhead">
<table id="prolisthead">
<thead>
<tr>
<th class="tr"></th>
<th>Picture</th>
<th>Part</th>
<th>Unit</th>
<th>OE No.</th>
<th>Description</th>
<th>Use For</th>
<th>Check</th>
<th class="tl"></th>
</tr>
</thead>
</table>
</div>
<div class="tbbody">
<table id="prolist">
<thead>
<tr>
<th class="tr"></th>
<th>Picture</th>
<th>Part</th>
<th>Unit</th>
<th>OE No.</th>
<th>Description</th>
<th>Use For</th>
<th>Check</th>
<th class="tl"></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="9" align="center" ><img src="images/loading.gif"/></td>
</tr>
</tbody>
</table>
</div>
<div class="tbfoot">
<table id="prolistfoot">
<tfoot>
<tr>
<th class="br"></th><th colspan="7" id="pagenav"></th><th class="bl"></th>
</tr>
</tfoot>
</table>
</div>
下面的js代码放在上面的HTML后面。
<script>
function fixtable()
{
for (i = 0; i < 20; i++)
{
t1=$('.tbbody thead th').eq(i).width();
//alert(t1);
if (t1!=null)
{
$('.tbhead thead th').eq(i).width(t1);
}
if (t1==null)
{
break;
}
}
}
fixtable();
$(document).ready(function(){
$('.tbbody').height($('body').height()-70-$('#import').height());
$(window).resize(function(){
$('.tbbody').height($('body').height()-70-$('#import').height());
fixtable();
});
});
</script>
当然，还少不了CSS
主要是这两行：
.tbbody{margin-top:0px;overflow-y:auto;border:1px solid #DCE0EB}
.tbbody table{margin:-29px -1px 0 -1px;}
.tbbody thead th{}
效果看这个图片：
