在這個插件的使用中，部分網友反應有兩個問題：
1>單元格內容很長時，會出現布局問題；
2>固定的表頭，有時與下面的tbody中的元素不能對齊
解決方法：
1>第一個問題實際就是單元格自動換行的問題，可以用下面的方法解決（但僅IE下通過），加入CSS
View Code
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下測試通過)
| 項目 | 常規性稅金 | 非常規性稅金 | 工程稅 | ||
|---|---|---|---|---|---|
| 城建稅 | 教育費附加% | 堤圍防護費% | 個人所得稅% | ||
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
| 0.2 | 0.2 | 0.2 | 0.2 | 0.2 | 0.2 |
示例代碼：
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>