通过本文主要向大家介绍了固定,表头等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
表头固定应该是一个用得比较多的功能，参考了网上几个例子，在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格，在编码时多写一个固定的表头，对于动态生成的不知道多少列的表格就无从下手。而且例子中大多只能满足限定高度的情况，如果限定宽度，出现横向滚动条就无能为力了。
我的目的就是要像jquery-ui那样，找到页面上存在的表格，调用一个方法就可以实现固定表头的功能。趁着动手学习写jquery插件的机会，自己写了一个表头固定的插件。
使用方式和jquery-ui中的插件一样，只需要一行代码 $('#table1').fixHeader({height:100});
下列浏览器测试通过
IE7 IE8 firefox16.0 chrome22.0
目前已知IE9下列不能对齐，手头暂时没有IE9来调试，以后再想法解决。
说明：
1 需要jquery，开发测试用的jquery-1.8.2，其他版本应该不大
2 表头部分的<tr>需要写在<thead>里
3 不限定宽度情况下，自动适应表格宽度（假设滚动条宽度为20px，实际宽度为表格宽度+20px）
4 支持多行表头固定
5 通常表格所有列都显示，无横向滚动条，只需要竖向滚动条的功能。该插件支持限定宽度条件下的表头固定。
6 限定宽度和高度的条件下固定表头显示时，表头固定功能无法单纯通过css来实现，需要通过js实现，会有轻微闪烁
7 已经考虑table和th，td的border-width设置成不同值的情况
8 已经考虑了表头中绑定的事件，原表头中绑定的事件仍然保留
特别注意：IE浏览器下，一定要设置表格中td和th的border-width，否则无法正确设置列宽，表头和数据部分会错位
使用方法：
限定高度：$('#table1').fixHeader({height:100});
限定高度和宽度：$('#table3').fixHeader({height:100,width:500});
下面为完整代码
我的目的就是要像jquery-ui那样，找到页面上存在的表格，调用一个方法就可以实现固定表头的功能。趁着动手学习写jquery插件的机会，自己写了一个表头固定的插件。
使用方式和jquery-ui中的插件一样，只需要一行代码 $('#table1').fixHeader({height:100});
下列浏览器测试通过
IE7 IE8 firefox16.0 chrome22.0
目前已知IE9下列不能对齐，手头暂时没有IE9来调试，以后再想法解决。
说明：
1 需要jquery，开发测试用的jquery-1.8.2，其他版本应该不大
2 表头部分的<tr>需要写在<thead>里
3 不限定宽度情况下，自动适应表格宽度（假设滚动条宽度为20px，实际宽度为表格宽度+20px）
4 支持多行表头固定
5 通常表格所有列都显示，无横向滚动条，只需要竖向滚动条的功能。该插件支持限定宽度条件下的表头固定。
6 限定宽度和高度的条件下固定表头显示时，表头固定功能无法单纯通过css来实现，需要通过js实现，会有轻微闪烁
7 已经考虑table和th，td的border-width设置成不同值的情况
8 已经考虑了表头中绑定的事件，原表头中绑定的事件仍然保留
特别注意：IE浏览器下，一定要设置表格中td和th的border-width，否则无法正确设置列宽，表头和数据部分会错位
使用方法：
限定高度：$('#table1').fixHeader({height:100});
限定高度和宽度：$('#table3').fixHeader({height:100,width:500});
下面为完整代码