转载：http://www.cnblogs.com/dataadapter/archive/2012/09/06/2672190.html
在这个插件的使用中，部分网友反应有两个问题：
1>单元格内容很长时，会出现布局问题；
2>固定的表头，有时与下面的tbody中的元素不能对齐
解决方法：
1>第一个问题实际就是单元格自动换行的问题，可以用下面的方法解决（但仅IE下通过），加入CSS
table tbody td
{
word-break: break-all;
word-wrap: break-word;
}
并在调用时传入tableLayout="fixed",采用固定的table布局方案。
2>第二个问题，试过很多种方法，最稳定的方法是在页面加载完后，将原来的表头TD宽度赋给新的固定表头，代码详见插件源代码
1 业务要求：
固定TABLE的表头，当垂直滚动时，表头位置不变，始终可见；
2 存在的问题：
网上很多的例子都是针对于单行的表头，如果是多表头,并且td有rowspan在IE下会出现下面的情况（如果您遇到的是多表头td在固定时出现跨行显示的问题，这篇文章适合您）
3 解决方法:
写了一个jquery插件来解决这个问题，主要思想是：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
4 Jquery插件代码：
View Code
/* * Auther:Mike.Jiang * Email: dataadapter@hotmail.com * Date: 2012-09-05 */ /* 主要思想： 1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中 2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置 */ (function ($) { $.fn.extend({ FixedHead: function (options) { var op = $.extend({ tableLayout: "auto" }, options); return this.each(function () { var $this = $(this); //指向当前的table var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去 $thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV var x = $thisParentDiv.position(); var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>") .insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头 .css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top }); var $thisClone = $this.clone(true); $thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中 $thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中 $this.css({ "marginTop": 0, "table-layout": op.tableLayout }); //当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV $thisParentDiv.scroll(function () { fixedDiv[0].scrollLeft = $(this)[0].scrollLeft; }); //因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题 //下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头 var $fixHeadTrs = $thisClone.find("thead tr"); var $orginalHeadTrs = $this.find("thead"); $fixHeadTrs.each(function (indexTr) { var $curFixTds = $(this).find("td"); var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")"); $curFixTds.each(function (indexTd) { $(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width()); }); }); }); } }); })(jQuery);
5实现要点
1>table表头元素要放在<thead>中
2>table外面需要包一层DIV
3>运行后发现表头与数据行不对齐，需要调整一下表格中元素的宽度。可以尝试传入tableLayout属性（因为样式问题多种多样，不能保证有用）。
6 示例(在FF和IE8下测试通过)
示例代码：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <style type="text/css"> table th { background-color: Gray; } table tbody td { word-break: break-all; word-wrap: break-word; } </style> <script type="text/javascript"> /* * Auther:Mike.Jiang * Email: dataadapter@hotmail.com * Date: 2012-09-05 */ /* 主要思想： 1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中 2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置 */ (function ($) { $.fn.extend({ FixedHead: function (options) { var op = $.extend({ tableLayout: "auto" }, options); return this.each(function () { var $this = $(this); //指向当前的table var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去 $thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV var x = $thisParentDiv.position(); var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>") .insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头 .css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top }); var $thisClone = $this.clone(true); $thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中 $thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中 $this.css({ "marginTop": 0, "table-layout": op.tableLayout }); //当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV $thisParentDiv.scroll(function () { fixedDiv[0].scrollLeft = $(this)[0].scrollLeft; }); //因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题 //下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头 var $fixHeadTrs = $thisClone.find("thead tr"); var $orginalHeadTrs = $this.find("thead"); $fixHeadTrs.each(function (indexTr) { var $curFixTds = $(this).find("td"); var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")"); $curFixTds.each(function (indexTd) { $(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width()); }); }); }); } }); })(jQuery); $(document).ready(function () { $("#tbTest").FixedHead({ tableLayout: "fixed" }); }); </script> </head> <body> <div style="height: 200px; width: 400px; overflow: auto;"> <table id="tbTest" border="1" cellspacing="1" cellpadding="1" style="width: 500px;"> <thead> <tr> <th rowspan="2" style="width: 30%"> 项目 </th> <th colspan="2"> 常规性税金 </th> <th colspan="2"> 非常规性税金 </th> <th rowspan="2" style="width: 10%"> 工程税 </th> </tr> <tr> <th style="width: 15%"> 城建税 </th> <th style="width: 15%"> 教育费附加% </th> <th style="width: 15%"> 堤围防护费% </th> <th style="width: 15%"> 个人所得税% </th> </tr> </thead> <tbody> <tr> <td> 0.2 </td> <td> 11111111111111111.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> </tbody> </table> </div> </body> </html>
相关推荐
为了解决这个问题，"jquery表头固定、列固定完美解决方案"应运而生。这个方案结合了jQuery库和自定义的JavaScript插件，旨在确保用户在滚动页面时，表头和选定的列始终可见。 jQuery是一个轻量级的JavaScript库，它...
"基于jQuery的table表头固定"通常涉及到以下关键技术点： 1. **分离表头和主体**：首先，我们需要将HTML表格的thead部分与tbody部分分离，这样在进行滚动操作时，thead可以独立于tbody进行定位。 2. **CSS定位**：...
"固定表头jQuery插件"的核心功能包括： 1. **表头固定**：无论用户如何滚动页面，表头始终位于屏幕顶部，保证用户能清晰地看到列名，便于理解表格内容。 2. **兼容性广**：此插件经过测试，兼容了多种浏览器，包括...
为解决这一问题，基于jQuery的固定html table表头/列头插件应运而生，例如本案例中的"jquery.fixedtable.js"。 jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画效果。在jQuery基础上...
当表格数据较多时，会导致表头随内容滚动，影响使用，因此使用jQuery做一个插件，压缩文件中有test.html是一个具体使用的案例，如果不会使用请查看https://blog.csdn.net/qq_28254093/article/details/82844050 文章
该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll"，其主要功能是在表格滚动时保持顶部行和左侧列固定，以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...
为了解决这个问题，"固定table表头的插件"应运而生。这种插件能够保持表头在页面上的固定位置，无论用户如何滚动，表头始终可见，提高了用户的浏览体验。 在HTML中，实现固定表头通常需要CSS和JavaScript的配合。...
对于不支持这些特性的老版本浏览器，可能需要使用一些JavaScript库如jQuery Fixed Header Table插件，或者使用传统的方法，如创建重复的表头和第一列，并通过JavaScript同步滚动状态。 总结起来，实现移动端table的...
为了解决这个问题，"Table 固定表头插件"应运而生，它使得在滚动查看长表格内容时，表头能够始终保持可见，便于用户定位和理解数据。 固定表头插件（Fixed Header Table）是Web开发中的一个实用工具，主要应用于...
总之，创建一个具有固定表头和列的全浏览器兼容的 jQuery 表格涉及多方面的技术，包括 JavaScript 事件监听、DOM 操作、CSS 定位和兼容性处理。通过合理地组织代码和利用现有的资源，我们可以构建出高性能且用户友好...
大家可能经常需要展示数据或者报表，表头如果滚动上去后，查看数据的类别和字段是个麻烦事情，在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果，相信大家肯定会受益的，这个demo使用了jQuery来实现，...
当表格数据较多时，为了提供良好的用户体验，我们通常需要实现表格的固定表头（Fixed Header）和固定列（Fixed Column）功能。这允许用户在滚动浏览长表格时，始终保持表头和指定列可见，便于快速定位和理解数据。 ...
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
例如，使用GridView的HeaderRow和Columns属性，配合JavaScript库如jQuery或纯CSS框架，如Bootstrap，可以轻松地创建具有固定表头和列的表格。 在实际应用中，开发者还需要考虑响应式设计，确保在不同设备和屏幕尺寸...
为了解决这个问题，"table冻结表头"插件应运而生。这个插件专门用于实现表格的头部和/或列的冻结，使得在浏览长表格时，表头始终可见，增强了用户体验。 "table冻结表头"是一款基于jQuery的轻量级插件，它允许...
首先，理解jQuery冻结表头的基本原理。通常，我们会创建一个固定在顶部的表头元素，即使在用户滚动页面时也始终保持可见。这可以通过监听窗口的滚动事件，然后调整表头的位置来实现。具体步骤如下： 1. **创建复制...
为了解决这个问题，"JavaScript:固定table的表头"这一技术应运而生，它的目标是确保当用户滚动页面时，表头始终固定在页面顶部，提供清晰的列标识。 实现固定表头的方法多种多样，其中JavaScript是一种常见的解决...
NULL 博文链接：https://xiaomaha.iteye.com/blog/1106606
总的来说，"Jquery表格添加滚动条插件，固定表头"这个主题涉及到前端开发中的DOM操作、事件处理、CSS样式和JavaScript插件使用。通过使用jQuery和相应的插件，我们可以提供更优秀的用户体验，使用户在浏览大数据量的...
这个效果对于提升用户体验非常重要，特别是在处理多列或者数据复杂度高的表格时，固定的表头可以让用户更容易理解数据的结构。 描述中的“整合了一个Gridview表头固定，里面有例子”表明，可能包含的压缩包文件中...