有時候，我們在開發前端頁面過程中，可能會用到這種表格：表頭固定不動，表格內容（<tbody>）需要豎直滾動。
像這樣的：
還有這樣的：
通過研究，我大致總結了以下三種實現辦法供大家參考，如果有錯誤之處敬請指正，也歡迎拍磚！！
一、表格總寬度自動，每列寬度設置統一用<colgroup>設置
這種實現方法最簡單，只需要用兩個表格，一個表格作為表頭，另一個表格用<div>包裹並設置該<div>的高度固定，高度溢出可滾動即可。兩個表格的列寬用相同的<colgroup>固定列寬值，需要注意的是滾動條會占用一定的寬度，一般是：17px，所以在表頭需要特別處理一下，不然表格就不能對齊了。大家看代碼，最簡單的辦法是表頭單獨空一列和下面的表格滾動條對齊。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
table th,table td{
border:1px solid #aaa;
}
table{
border-collapse:collapse;
}
</style>
</head>
<body>
<div class="tableWrap" style="margin:20px;width:316px;">
<label>可滾動表格——表格寬度自動每列寬度設置<col></label>
<table class="table-thead">
<colgroup>
<col width="50">
<col width="100">
<col width="150">
<col width="17">
</colgroup>
<thead>
<tr>
<th>序號</th>
<th>賬戶名稱</th>
<th>賬戶編號</th>
<th></th>
</tr>
</thead>
</table>
<div class="comTbody" style="height:90px;overflow:auto;border:1px solid #ddd">
<table class="table-tbody" style="border-top: 0;">
<colgroup>
<col width="50">
<col width="100">
<col width="150">
</colgroup>
<tbody>
<tr>
<td>1</td>
<td>中國電信</td>
<td>12312312313132</td>
</tr>
<tr>
<td>1</td>
<td>中國電信</td>
<td>12312312313132</td>
</tr>
<tr>
<td>1</td>
<td>中國電信</td>
<td>12312312313132</td>
</tr>
<tr>
<td>1</td>
<td>中國電信</td>
<td>12312312313132</td>
</tr>
<tr>
<td>1</td>
<td>中國電信</td>
<td>12312312313132</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
第一種方法是我自己為了快速實現采用的辦法，過后我想起來經常看到的數據表格（dataGrid），也是表頭固定，內容可以滾動，比如嘴上那兩張圖片分別是：kendo UI——grid、easyUI——dataGrid 。這樣的表格看起來挺漂亮的，我研究了一下，發現它們兩種有各自的實現方式。這兩種表格在實際運用中因為綁定了很多JS事件，所以表格嵌套的層級很多，下面我為了更清晰的展示給大家，簡化了嵌套。
二、表格寬度100%，列寬度統一用<colgroup>設置————參考Kendo UI——grid
<label>可滾動表格——表格寬度100%，列寬度設置<col></label>
<div class="table-wrap">
<div class="table-head">
<div class="table-head-wrap">
<table class="grid">
<colgroup>
<col style="width:80px">
<col>
<col>
<col style="width:150px">
</colgroup>
<thead>
<tr>
<th>
<span class="tab-link">序號</span>
</th>
<th>
<span class="tab-link">姓名</span>
</th>
<th>
<span class="tab-link">年齡</span>
</th>
<th>
<span class="tab-link">地址</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="table-content">
<table class="grid">
<colgroup>
<col style="width:80px">
<col>
<col>
<col style="width:150px">
</colgroup>
<tbody>
<tr>
<td>
<div>001</div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div>23</div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div>001</div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div>23</div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div>001</div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div>23</div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div>001</div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div>23</div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div>001</div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div>23</div>
</td>
<td>
<div>上海</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
這里表格添加了一個樣式：table-layout: fixed; 列寬由表格寬度和列寬度設定。這種方法適用於，表格寬度固定。
三、表格寬度自動，列寬度精確固定設置————參考easyUI——dataGrid
<div class="data-grid">
<div class="data-view">
<div class="grid-head">
<div class="grid-head-inner">
<table class="data-table">
<tbody>
<tr class="data-table-row">
<td>
<div class="datagrid-cell cell-c1">
<div>Item ID</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<div>Product</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<div>List Price</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<div>Unit Cost</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<div>Attribute</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid-body">
<table class="datagrid-btable">
<tbody>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-1</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-01</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span>10</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-1</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-01</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span>10</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-1</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-01</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span>10</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-1</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-01</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span>10</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-1</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-01</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span>10</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-1</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-01</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span>10</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-1</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-01</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span>10</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
這種方法適用於每列寬度固定的表格。
終極做法：親測可用
原理：在表格的前面追加一個ul，當頁面滾動的時候，ul設置顯示，並且在里面追加內容li，設置每一個li的寬度與表格的thead中對應的th的寬度一致，如果頁面為自適應的，需要添加resize的事件，當頁面resize時同時設置li的寬度
jsp/html:
<div class="tbl scroll-tbl">
<ul class="th-fixed"></ul>
<table class="table table-striped table-bordered g-tbl" id="tbl">
</div>
css
.scroll-tbl{position:relative} /* 固定表頭 */ ul.th-fixed{ display: none; position: absolute; top:0; color:#fff; border-left: 1px solid rgb(221, 221, 221); background-color: rgb(64, 173, 242); text-align: center; white-space: nowrap; } ul.th-fixed li{ padding: 8px; line-height: 1.42857143; display: inline-block; float:initial; border: 1px solid #ddd; } ul.th-fixed li:first-child{border-left: 1px solid transparent;} ul.th-fixed li+li{border-left:none;}
js
這里只是在構建表格的時候同時構建ul里面的內容（其余代碼可忽略）
function initTableYdata(rowData,legendData,legendData1,type){ var tableData=[],hstr="",bstr="",ulList="<li>設備名稱</li>"; $("#tbl").html(""); for(var i=0;i<treeCodeArr.length;i++){ var obj={}; obj.code=treeCodeArr[i].code; obj.name=treeCodeArr[i].name; obj.data=[]; obj.data.push(rowData[0].data[i]); obj.data.push(rowData[1].data[i]); tableData.push(obj); } /*構建表格*/ hstr="<thead><tr class='yel'><th>設備名稱</th>"; for(var j=0;j<legendData.length;j++){ hstr+=type==0?"<th>"+legendData1[j]+"</th>":"<th>"+legendData[j]+"</th>"; ulList+=type==0?"<li>"+legendData1[j]+"</li>":"<li>"+legendData[j]+"</li>"; } $(".tbl .th-fixed").html(""); $(".tbl .th-fixed").html(ulList); hstr+="</tr></thead>"; bstr="<tbody>"; for(var m=0;m<tableData.length;m++){ var _data=tableData[m].data; bstr+="<tr><td>"+tableData[m].name+"</td>" for(var n=0;n<_data.length;n++){ bstr+="<td>"+_data[n]+"</td>" } bstr+="</tr>" } bstr+="</tbody>"; str=hstr+bstr; $("#tbl").append(str); //如果頁面有自適應需要加上這里，不然自適應之后ul頭部不會自適應，因為我的頁面在resize的時候重新構建了表格 $('ul.th-fixed').each(function(index,ele){ setUlWidth($(ele),true); }); //動畫的效果 showTable(); }
重要部分：
為需要滾動的部分添加滾輪事件，
$(function(){ $('.scroll-tbl').on('scroll',function(){ var top=$(this)[0].scrollTop; var el=$(this).find('ul.th-fixed'); if(!el[0]){return false} setUlWidth(el,el.next()[0].offsetWidth!=el[0].offsetWidth); if(el.css('display')!=='block'){el.show();} el.css('top',top+'px'); }); var Timer; $(window).resize(function(){ Timer=setTimeout(function(){ if(Timer){clearTimeout(Timer)} $('ul.th-fixed').each(function(index,ele){ setUlWidth($(ele),true); }); },200); }); }) function setUlWidth(el,t){ if(!t){return false;} el.css('width',el.next()[0].offsetWidth+'px'); el.find('li').each(function(i,e){ var w=el.next().find('thead>tr>th'); $(e).css('width',w[i].offsetWidth+'px'); $(e).css('height',w[i].offsetHeight+'px'); }); }
手寫測試版本：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> #tbl{width:600px;height:300px;margin:0 auto;overflow:auto;position:relative} ul,li{margin:0;padding:0} table{width:100%;height:500px;border-collapse:collapse} table th,table td{ border:1px solid #ddd; text-align:center; } li{display:inline-block;list-style:none} .th-fixed li{ display: inline-block; border: 1px solid #ddd; border-left:none; border-right:none } .th-fixed{position:absolute;top:0;white-space: nowrap;} </style> </head> <body> <div id="tbl" class="scroll-tbl"> <ul class="th-fixed"><li>1</li><li>2</li><li>2</li><li>2</li><li>2</li></ul> <table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> </div> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript"> $(function(){ //初始化的時候就給li設置寬度 $('ul.th-fixed').each(function(index,ele){ setUlWidth($(ele),true); }); //給目標div添加滾動事件 $('.scroll-tbl').on('scroll',function(){ //得到滾動的距離 var top=$(this)[0].scrollTop; var el=$(this).find('ul.th-fixed'); //如果沒有ul就return if(!el[0]){return false} //setUlWidth(el,el.next()[0].offsetWidth!=el[0].offsetWidth); if(el.css('display')!=='block'){el.show();} //設置ul的top值用，因為滾動的時候ul也在動，要讓他看起來不動 el.css('top',top+'px'); }); var Timer; $(window).resize(function(){ Timer=setTimeout(function(){ if(Timer){clearTimeout(Timer)} $('ul.th-fixed').each(function(index,ele){ setUlWidth($(ele),true); }); },200); }); }) function setUlWidth(el,t){ if(!t){return false;} el.css('width',el.next()[0].offsetWidth+'px'); el.find('li').each(function(i,e){ var w=el.next().find('thead>tr>th'); $(e).css('width',w[i].offsetWidth+'px'); $(e).css('height',w[i].offsetHeight+'px'); }); } </script> </body> </html>
方法擴展；
描述：當div滾動的時候判斷是否有ul，ul不存在就構建，ul存在不構建，設置ul的top值就可以，讓ul看起來靜止不動，
js
$(function(){ //監聽滾動條的事件 $('.scroll-div').on('scroll',function(){ //判斷ul是否存在，不存在構建，存在不構建 var el=$(this).find('ul.h-fixed'); var ulWidth=$(this).find(".s-tbl")[0].offsetWidth+"px"; //var top=""; if(!el[0]){ var str="<ul class='h-fixed' style='width:"+ulWidth+"'>"; //構建ul //1.找到tabel里面的表頭部分克隆出來 var $tr=$("#content-tbl tr:not([class])"); $tr.children().each(function(idx,ele){ if(idx==$tr.children().length-1){return} var wid=$(ele)[0].offsetWidth-1+"px";//因為有邊距的原因,需要將邊距的寬度減掉 var hei=$(ele)[0].offsetHeight-1+"px";//減去高度的border str+='<li style="width:'+wid+';height:'+hei+';line-height:'+hei+' ">'+$(ele).text()+'</li>'; }) str+="</ul>"; $(this).append(str); }else{ //就設置top值 el.css("top",$(this)[0].scrollTop+"px") } }); })
css
#tblForm .h-fixed{ position:absolute; top:0; font-size:14px; border-bottom:1px solid #A3C0E8; border-top:1px solid #A3C0E8; background-color:rgb(239, 239, 239) } #tblForm .h-fixed li{ display:inline-block; white-space: nowrap; text-align:center; line-height: 3.428571; border-right:1px solid #A3C0E8; } ul.h-fixed li:first-child{border-left: 1px solid #A3C0E8;background-color: #E2F0FF}
懸浮效果：
機場項目有一個問題，之前在做頁面布局的時候，查詢條件與展示的table沒有分開，導致頁面內容溢出或者瀏覽器縮放的時候，條件和表格一起滾動，出現不好的體驗，需要修改的時候首先就的修改頁面布局，這種工作量比較大，所以就想到一個方法，在頁面滾動的時候，當表頭不見的時候重新構建一個表頭出來，固定在頁面的上方，當原表頭出現的時候，就將構建的表頭隱藏或者銷毀
js
$(function(){ $("body").css("position","relative"); $(document).on('scroll',function(e){ var el=$(this).find(".scrollTbl"); //判斷距離是否ok if($(this).scrollTop()>115){//115px是因為表格上方有115的查詢條件的高度 //判斷是否有div if(!el[0]){ //構建div與table var $str=$('<div id="scrollTbl" style="position:absolute;top:0" class="scrollTbl"><table class="conTbl tbl"></table></div>');//表格的寬度需要自行設置，如果沒有自適應的話 //1、獲取到原始表格的表頭 var str=""; $("#grid tr.tbl-header").each(function(idx,ele){ str="<tr>"; $(ele).children().each(function(i,e){ var _wid=$(e).css("width"); str+="<td style='width:"+_wid+"'>"+$(e).text()+"</td>" }) str+="</tr>"; }) $str.find("table").append($(str)); $("body").append($str); }else{ //設置top值 el.css("top",($(this).scrollTop()-15)+"px")//這里是因為body里面有15px的像素值 } }else{ el.remove(); } }); })
解釋一下，為什么將事件綁定在document的上面呢，因為body上沒有給定寬和高，就是說body是隨着內容的高度變化的，所以將事件綁定在body上面是不生效的，要么就給body設置高度
以上的方法都只能解決表頭單行的，如果要處理多行表格，或者是表格有合並，這種情況下還是不能用ul li的形式，最終只能轉換成table的形式
思路：滾動的時候，判斷時候有表頭，沒有就創建，找到現有的表格的表格進行遍歷，創建每一個th，td，同時設置寬度（必須），因為表格的寬度是根據內容生成的，設置行合並列合並，當然如果是克隆就不需要，克隆的時候是將所有的屬性一起克隆了
可能遇到的問題解決：
1、最好是將創建的表格與現有的表頭放在同一個容器下，因為如果沒有在同一個容器下面，當光標移動到表頭的位置時，滾動表格就無效了，我現在的demo是沒有，因為有樣式沖突，
2、注意表格要加table-layout：fixed，原表格和現有表格都要加，不然會錯位
遍歷構建版本
js：
/*適應於報表類型一 reportForm1*/ $(function(){ $("#tblForm").on('scroll',function(){ //判斷table是否存在，不存在就構建，反之 var el=$("body").find(".scrollTbl"); if(!el[0]){ var $str=$('<div class="scrollTbl" style="position:absolute;top:80px;overflow-y: scroll;"><table cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;border-left: 1px solid #A3C0E8;border-bottom: 1px solid #A3C0E8;"></table></div>'); //1、獲取到原始表格的表頭 var str=""; $("#tblForm>table tr:has(th)").each(function(idx,ele){ str+="<tr>"; $(ele).children().each(function(i,e){ var _wid=$(e).width()+"px",_hei=$(e).height()+"px"; var col=$(e).attr("colspan"); var row=$(e).attr("rowspan"); col=!!col?col:1; row=!!row?row:1; str+="<th rowspan="+row+" colspan="+col+" style='width:"+_wid+";height:"+_hei+";padding:8px 10px;text-align:center;border-top:1px solid #A3C0E8;border-right:1px solid #A3C0E8;font-size:14px;background-color:#E2F0FF;font-weight:normal'>"+$(e).text()+"</th>" }) str+="</tr>"; }) $str.find("table").append($(str)); $("body").append($str); } }) })
克隆的版本
js
$(function(){ $("#bodyer").css("position","relative"); $("#bodyer").on('scroll',function(){ //判斷是否有ul var el=$(this).find(".table-fixed"); if(!el[0]){ $(this).append("<div class='table-fixed' style='position:absolute;top:0'><table class='conTbl1'></table></div>"); var older=$(this).find(".conTbl1 thead tr").children(); //創建，找到表格的第一行進行克隆 var $thead=$(this).find(".conTbl1 thead").clone(); console.log($thead); $thead.find("tr").children().each(function(idx,ele){ $(ele).each(function(i,e){ $(e).css("width",older.eq(idx).css("width")); $(e).css("height",older.eq(idx).css("height")); }) }) $(this).find('.table-fixed table').append($thead); }else{ //就設置top值 el.css("top",$(this)[0].scrollTop+"px") } }) })
2018年7月16，這種方法最終還是出現了bug，因為不在同一個div中，bug就是在橫向滾動的時候頭部沒有跟着動，另外一個鼠標放在頭部的時候，無法滾動，所以還是必須放在同一個div中
更改好的代碼：
/*適應於報表類型一 reportForm1*/ $(function(){ $("#tblForm").on('scroll',function(){ //判斷table是否存在，不存在就構建，反之 var el=$("#tblForm").find(".scrollTbl"); if(!el[0]){ var $str=$('<div class="scrollTbl" style="position:absolute;top:0px;"><table cellpadding="0" cellspacing="0" style="table-layout:fixed;width:3000px;border-left: 1px solid #A3C0E8;border-bottom: 1px solid #A3C0E8;"></table></div>'); //1、獲取到原始表格的表頭 var str=""; $("#tblForm>table tr:has(th)").each(function(idx,ele){ str+="<tr>"; $(ele).children().each(function(i,e){ var _wid=$(e).width()+"px",_hei=$(e).height()+"px"; var col=$(e).attr("colspan"); var row=$(e).attr("rowspan"); col=!!col?col:1; row=!!row?row:1; str+="<th rowspan="+row+" colspan="+col+" style='width:"+_wid+";height:"+_hei+";padding:8px 10px;text-align:center;border-top:1px solid #A3C0E8;border-right:1px solid #A3C0E8;font-size:14px;background-color:#E2F0FF;font-weight:normal'>"+$(e).text()+"</th>" }) str+="</tr>"; }) $str.find("table").append($(str)); $("#tblForm").append($str); }else{ //設置top值 $("#tblForm").find(".scrollTbl").css("top",$(this)[0].scrollTop+"px") } }) })
2018年7月16號
一直在不斷改進，上面的提出了還發現了一個bug，如果頁面有自適應的話，表格的表體與表頭還是會錯位，所以就再需要加上一個方法，在頁面resize的時候重新設置一個th的寬度，更新版本如下
/*適應於報表類型一 reportForm5*/ $(function(){ var Timer; $(window).resize(function(){ Timer=setTimeout(function(){ //setTblWidth($("#tblForm").find(".scrollTbl")) $("#tblForm").trigger("scroll");//上面的一種方法也可以 },200); }); $("#tblForm").on('scroll',function(){ //判斷table是否存在，不存在就構建，反之 var el=$("#tblForm").find(".scrollTbl"); if(!el[0]){ var $str=$('<div class="scrollTbl" style="position:absolute;top:0px;width:100%"><table cellpadding="0" cellspacing="0" style="table-layout:fixed;border-left: 1px solid #A3C0E8;border-bottom: 1px solid #A3C0E8;"></table></div>'); //1、獲取到原始表格的表頭 var str=""; $("#tblForm>table tr:not([class])").each(function(idx,ele){//報表類型1和5的區別就在這個地方，因為表頭不一樣 str+="<tr>"; $(ele).children().each(function(i,e){ var _wid=$(e).width()+"px",_hei=$(e).height()+"px"; var col=$(e).attr("colspan"); var row=$(e).attr("rowspan"); col=!!col?col:1; row=!!row?row:1; str+="<th rowspan="+row+" colspan="+col+" style='width:"+_wid+";height:"+_hei+";padding:8px 10px;text-align:center;border-top:1px solid #A3C0E8;border-right:1px solid #A3C0E8;font-size:14px;background-color:#E2F0FF;font-weight:normal'>"+$(e).text()+"</th>" }) str+="</tr>"; }) $str.find("table").append($(str)); $("#tblForm").append($str); }else{ //設置top值 $("#tblForm").find(".scrollTbl").css("top",$(this)[0].scrollTop+"px") //設置寬度(，需要重新設置寬度) setTblWidth(el); } }) }) //設置寬度的方法 function setTblWidth(el,t){ if(!el)return; var w=el.prev().find('tr:not([class])');//動的 el.find('table tr').each(function(idx,ele){//固定的表頭 $(ele).children().each(function(i,e){ $(e).css('width',$(w[idx]).children().eq(i).css("width")); $(e).css('height',$(w[idx]).children().eq(i).css("height")); }) }); }
還要注意 table-layout：fixed
