问题描述: ?当我们在页面列出的表格数据的行远远大于屏幕高度. 而滚动滚动条到数据底部时却看不到该列所对应的列标题
?
解决方法: JQUERY 插件
?
步骤:
1. ?引用jquery-1.3.2.min.js ,?CloneTableHeader.js (两个JS请查看附件)
?
2. ?编写JS:
$(function(){ jQuery.fn.CloneTableHeader("tab1", "div1");?//tab1表格ID,div1 : 表格外div的ID
? });
?
? 3. ?代码如下:?
<div style=" height: 100px; overflow:scroll;" id="div1">
<table cellpadding="0" id="tab1" cellspacing="0" border="0" class="itemList">
<thead>
<tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;
padding: 0px 0px 0px 0px;">
<td>
编号
</td>
<td>
姓名
</td>
<td>
年龄
</td>
<td>
城市
</td>
</tr>
<tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;
padding: 0px 0px 0px 0px;">
<td colspan="2">身高</td>
<td colspan="2">体重</td>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
</tbody>
</table>
</div>
?
4. 注意: ?表格的列标题必须在THEAD之内, 否则没有效果.
?