table冻结第一行
<html> <head> <title></title> <mce:style type="text/css"><!-- div#tbl-container {position:absolute;left:21px;top:70px;width:95%;height:300px;overflow: auto;} .table { TABLE-LAYOUT: fixed; position: absolute; BORDER-COLLAPSE: collapse; border-collapse:collapse; border-top: solid 0px;border-left:solid 0px;border-right:solid 0px;border-bottom:solid 0px; } thead td { background-color: #FFFFFF; FONT-SIZE: 12px; position:relative; font: @宋体; text-align: center; text-valign: middle; top: expression(document.getElementById("tbl-container").scrollTop); /*IE5+ only*/ z-index: 20; border-style: solid; border-top-width: 1px; border-left-width: 1px; border-right-width: 0px; border-bottom-width: 1px; } thead td.locked_in { position: relative; left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /*IE5+ only*/ z-index: 21; } thead td.locked_out { position: relative; left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /*IE5+ only*/ border-right-width: 1px; z-index: 21; } td.locked { background-color: #FFFFFF; left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /*IE5+ only*/ position: relative; z-index: 10; border-color:#000000; FONT-SIZE: 12px; border-style: solid; font: @宋体; text-align: center; text-valign: middle; height:25px; } .thtd { FONT-SIZE: 12px; text-align: center; text-valign: middle; font: @宋体; } .thtd_firstline { FONT-SIZE: 12px; text-align: center; text-valign: middle; font: @宋体; border-top-width: 0px; } --></mce:style><style type="text/css" mce_bogus="1">div#tbl-container {position:absolute;left:21px;top:70px;width:95%;height:300px;overflow: auto;} .table { TABLE-LAYOUT: fixed; position: absolute; BORDER-COLLAPSE: collapse; border-collapse:collapse; border-top: solid 0px;border-left:solid 0px;border-right:solid 0px;border-bottom:solid 0px; } thead td { background-color: #FFFFFF; FONT-SIZE: 12px; position:relative; font: @宋体; text-align: center; text-valign: middle; top: expression(document.getElementById("tbl-container").scrollTop); /*IE5+ only*/ z-index: 20; border-style: solid; border-top-width: 1px; border-left-width: 1px; border-right-width: 0px; border-bottom-width: 1px; } thead td.locked_in { position: relative; left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /*IE5+ only*/ z-index: 21; } thead td.locked_out { position: relative; left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /*IE5+ only*/ border-right-width: 1px; z-index: 21; } td.locked { background-color: #FFFFFF; left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /*IE5+ only*/ position: relative; z-index: 10; border-color:#000000; FONT-SIZE: 12px; border-style: solid; font: @宋体; text-align: center; text-valign: middle; height:25px; } .thtd { FONT-SIZE: 12px; text-align: center; text-valign: middle; font: @宋体; } .thtd_firstline { FONT-SIZE: 12px; text-align: center; text-valign: middle; font: @宋体; border-top-width: 0px; }</style> </head> <body border="1"> <div id="tbl-container"> <table class="table" width="1050" border="1" bordercolor="#000000"> <thead > <tr> <td class="locked_in" >123</td> <td class="locked_out" >321</td> <td style="border-right-width: 1px;border-left-width: 0px;" mce_style="border-right-width: 1px;border-left-width: 0px;">123321</td> </tr> </thead> <tbody> <tr> <td class="locked" style="border-right-width: 0px;border-bottom-width: 1px; border-top-width: 0px;" mce_style="border-right-width: 0px;border-bottom-width: 1px; border-top-width: 0px;">济南</td> <td class="locked" style="border-right-width: 1px;border-left-width: 1px;border-bottom-width: 1px;border-top-width: 0px;" mce_style="border-right-width: 1px;border-left-width: 1px;border-bottom-width: 1px;border-top-width: 0px;">客户</td> <td class="thtd_firstline" style="border-left-width: 0px;border-right-width: 1px;border-bottom-width: 1px;" mce_style="border-left-width: 0px;border-right-width: 1px;border-bottom-width: 1px;">--</td> </tr> </tbody> </table> </div> </body> </html>
-----------------------------------------------------------------------------------------
用jQuery
<!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 runat="server">
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="CloneTableHeader.js" type="text/javascript"></script>
<style type="text/css">
.itemList
{
border: solid 1px #cccccc;
overflow: hidden;
width: 100%;
border-collapse: collapse;
}
.itemList td
{
padding: 0px 0px 0px 0px;
color: #444444;
border: solid 1px #cccccc;
text-align: center;
line-height: 20px;
}
.selected
{
background-color: #fdee88;
}
.hovertr
{
background-color: #fff8c7;
}
.errortd
{
border: dashed 1px red;
}
</style>
<script type="text/javascript">
jQuery(function() {
jQuery.fn.CloneTableHeader("tab1", "div1");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style=" height: 100px; overflow:scroll;" id="div1">
<table cellpadding="0" id="tab1" cellspacing="0" border="0" class="itemList">
<thead>
<tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;
padding: 0px 0px 0px 0px;">
<td>
编号
</td>
<td>
姓名
</td>
<td>
年龄
</td>
<td>
城市
</td>
</tr>
<tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;
padding: 0px 0px 0px 0px;">
<td colspan="2">身高</td>
<td colspan="2">体重</td>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
CloneTableHeader.js
/// <reference path="jquery.js" /> jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) { var obj = document.getElementById("tableHeaderDiv" + tableId); if (obj) { jQuery(obj).remove(); } var browserName = navigator.appName; var ver = navigator.appVersion; var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") + 5, ver.lastIndexOf("Windows"))); var content = document.getElementById(tableParentDivId); var scrollWidth = content.offsetWidth - content.clientWidth; var tableOrg = jQuery("#" + tableId) var table = tableOrg.clone(); table.attr("id", "cloneTable"); var tableClone = jQuery(tableOrg).find("tr").each(function() { }); var tableHeader = jQuery(tableOrg).find("thead"); var tableHeaderHeight = tableHeader.height(); tableHeader.hide(); var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() { return jQuery(this).width(); }); var tableCloneCols = jQuery(table).find("thead tr:first td") if (colsWidths.size() > 0) { for (i = 0; i < tableCloneCols.size(); i++) { if (i == tableCloneCols.size() - 1) { if (browserVersion == 8.0) tableCloneCols.eq(i).width(colsWidths[i] + scrollWidth); else tableCloneCols.eq(i).width(colsWidths[i]); } else { tableCloneCols.eq(i).width(colsWidths[i]); } } } var headerDiv = document.createElement("div"); headerDiv.appendChild(table[0]); jQuery(headerDiv).css("height", tableHeaderHeight); jQuery(headerDiv).css("overflow", "hidden"); jQuery(headerDiv).css("z-index", "20"); jQuery(headerDiv).css("width", "100%"); jQuery(headerDiv).attr("id", "tableHeaderDiv" + tableId); jQuery(headerDiv).insertBefore(tableOrg.parent()); }