我使用此函数使我的动态表具有固定的标题（滚动表时始终显示标题）
function scrolify(tblAsJQueryObject, height) {
var oTbl = tblAsJQueryObject;
// for very large tables you can remove the four lines below
// and wrap the table with <div> in the mark-up and assign
// height and overflow property
var oTblDiv = $("<div/>");
oTblDiv.css('height', height);
oTblDiv.attr("id", "divTblBody");
oTblDiv.css('overflow', 'scroll');
oTbl.wrap(oTblDiv);
// save original width
oTbl.attr("data-item-original-width", oTbl.width());
oTbl.find('thead tr td').each(function() {
$(this).attr("data-item-original-width", $(this).width());
});
oTbl.find('tbody tr:eq(0) td').each(function() {
$(this).attr("data-item-original-width", $(this).width());
});
// clone the original table
var newTbl = oTbl.clone();
// remove table header from original table
oTbl.find('thead tr').remove();
// remove table body from new table
newTbl.find('tbody tr').remove();
oTbl.parent().parent().prepend(newTbl);
newTbl.wrap("<div/>");
// replace ORIGINAL COLUMN width
newTbl.width(newTbl.attr('data-item-original-width'));
newTbl.find('thead tr td').each(function() {
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(oTbl.attr('data-item-original-width'));
oTbl.find('tbody tr:eq(0) td').each(function() {
$(this).width($(this).attr("data-item-original-width"));
});
}
这是表格的html代码：
<table id='tblneedToBeScrolled' class='tblFont' cellspadding=1 cellspacing=1 width=100% style='border-collapse: separate !important; border-collapse: collapse' >
<thead>
<tr style='height:20; background-color:white'>"
<th colspan=2 width='38' align='left' class='view_detail_header' style='border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>
<input type=checkbox name='chkAll' id='chkAll' onclick='checkAll(this);'/>
</th>
<th width='20' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col2</th>
<th width='85' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col3</th>
<th width='60' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col4</th>
<th width='80' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col5</th>
<th width='80' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col6</th>
<th width='250' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col7</th>
<th width='130' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col8</th>
<th width='300' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col9</th>
<th width='180' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col10</th>
<th width='180' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col11</th>
<th width='70' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col12</th>
<th width='70' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col13</th>
<th width='70' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col14</th>
<th width='80' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col15</th>
<th width='90' align='left' class='view_detail_header' style='padding-left:4px; border-left-style: solid;border-left-width:0,5;border-top-style: solid; border-top-width: 0,5;border-bottom-style: solid; border-bottom-width: 0,5;'>Col16</th>
</tr>
</thead>
<tbody>
//the body dynamically load here with the width same as the every header column but usually the content makes the width of the body columns actual width wider than what has been declared
</tbody>
</table>
</div>
问题是每个标题列的宽度与正文中每列的宽度不同 有人可以帮我解决吗？ 我试着在这里模拟它： http://jsfiddle.net/JK3ZT/ 但这似乎不太好用 这是外观看起来很乱的例子：
| header1 | header2 | header3|
| body1 | body2 | body3 |
| body1 | body2 | body3 |
| body1 | body2 | body3 |
| body1 | body2 | body3 |
| body1 | body2 | body3 |
| body1 | body2 | body3 |
应该是这样的：
| header1 | header2 | header3|
| body1 | body2 | body3 |
| body1 | body2 | body3 |
| body1 | body2 | body3 |
| body1 | body2 | body3 |
| body1 | body2 | body3 |
| body1 | body2 | body3 |