问题描述: 当我们在页面列出的表格数据的行远远大于屏幕高度. 而滚动滚动条到数据底部时却看不到该列所对应的列标题
解决方法: 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之内, 否则没有效果.
分享到：
相关推荐
非常实用的js固定表格标题和列的实例，兼容IE6以上以及火狐、谷歌等浏览器。 尤其对页面报表非常使用。
ASP.NET 表格/GRIDVIEW 固定标题列与栏位 这个是官网下载的，里面用的是表格，但是其他将表格替换为GRIDVIEW也是一样的，我的博客里面有说明。http://blog.csdn.net/luohai326/article/details/8993648 另外我下载了...
JQuery固定表头 及左侧列
自由调整表格列宽和固定标题及首列,非常好用
1、数据较多时需要横向竖向滚动，很多数值记不清谁是谁了，所以需要主要标题内容需要固定。 2、通常的首行首列的固定，下方滚动条左侧会空缺一块，不够美观，我加了一层悬浮的div 给予适应
本文用简单示例，说明webix如何快速实现数据表的锁列，锁标题行，翻页，数据统计，排序，这些功能只需要配置实现，不需要写代码。 本文提供所有运行的源代码，可以导入到MyEclipse中即刻运行。
Flex高级表格标题分组与列的锁定,及样式
表格列标题组合； 表格固定左序列、顶部序列、第一行、列标题、统计行； 自动统计，排序（自定义统计规则）； 表格图文、序列号、列标题格式化； 表格各组成背景、文字、网格、padding等配置； 表格批注； 表格内容...
浮子 表的固定/粘性标题和左列 ...添加了功能，使冻结的标题和列标题与相关表单元格中的内容和几何形状更改保持同步。 截至2015年1月7日，该产品已在： IE , Chrome FireFox Opera 逻辑 逻辑主要包括三个部分。
表格列标题组合； 表格固定左序列、顶部序列、第一行、列标题、统计行； 自动统计，排序（自定义统计规则）； 表格图文、序列号、列标题格式化； 表格各组成背景、文字、网格、padding等配置； 表格批注； 表格内容...
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定...在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <th><div>标题一</div></th> <th><div>标题二</div></th> <th><div>标题三</div></th> <th>...
表格列标题组合； 表格固定左序列、顶部序列、第一行、列标题、统计行； 自动统计，排序（自定义统计规则）； 表格图文、序列号、列标题格式化； 表格各组成背景、文字、网格、padding等配置； 表格批注； 表格内容...
主要介绍了C#设置WinForm中DataGrid列的方法,包括列宽、列标题等部分,并分析了其中相关的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
1、左侧是表头的表格数据展现， 2、支持多行，多表头 3、固定表头的功能 4、能够支持标题 5、获取表格中的数据 6、支持IE/CHROME
类似 Excel 表格效果，固定第一行和第一列，可自定义表头、行标题和列标题
表格列标题组合； 表格固定左序列、顶部序列、第一行、列标题、统计行； 自动统计，排序（自定义统计规则）； 表格图文、序列号、列标题格式化； 表格各组成背景、文字、网格、padding等配置； 表格批注； 表格内容...
我们在使用bootstraptable做表格展示时，有时需要固定表格的高度当数据超出高度会出现滚动条，这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度，造成表头 数据 的div宽度不...
表的固定/粘性标题和左列 查看html / index.html的用法。 演示位于此处 一个小JavaScript文件，它实现了粘滞表标题和左粘滞列，使您可以在EXCEL-Spreadsheets中找到冻结窗格功能。 这是通过使用表标题，所有左列...