CSS代码让Table产生固定表头

一、CSS代码

<style type="text/css"> 
 <!-- 
 body,table, td, a {font:9pt;} 
 /*重点：固定行头样式*/
 .scrollRowThead{position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);z-index:0;}
 /*重点：固定表头样式*/
 .scrollColThead {position: relative;top: expression(this.parentElement.parentElement.parentElement.scrollTop);z-index:2;}
 /*行列交叉的地方*/
 .scrollCR { z-index:3;}
 /*div外框*/
 .scrollDiv {height:200px;clear: both; border: 1px solid #EEEEEE;OVERFLOW: scroll;width: 320px; }
 /*行头居中*/
 .scrollColThead td,.scrollColThead th{ text-align: center ;}
 /*行头列头背景*/
 .scrollRowThead,.scrollColThead td,.scrollColThead th{background-color:EEEEEE;}
 /*表格的线*/
 .scrolltable{border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; }
 /*单元格的线等*/
 .scrolltable td,.scrollTable th{border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5px; width:80px;}
 
 .scrollTable thead th{background-color:#EEEEEE;font-weight:bold;position:relative;}
 --> 
</style>

二、JS代码

 <script type="text/javascript">
 function FixTable(TableID, FixColumnNumber, width, height) {
     /// <summary>
     ///     锁定表头和列
     ///     <para> sorex.cnblogs.com </para>
     /// </summary>
     /// <param name="TableID" type="String">
     ///     要锁定的Table的ID
     /// </param>
     /// <param name="FixColumnNumber" type="Number">
     ///     要锁定列的个数
     /// </param>
     /// <param name="width" type="Number">
     ///     显示的宽度
     /// </param>
     /// <param name="height" type="Number">
     ///     显示的高度
     /// </param>
     if ($("#" + TableID + "_tableLayout").length != 0) {
         $("#" + TableID + "_tableLayout").before($("#" + TableID));
         $("#" + TableID + "_tableLayout").empty();
     }
     else {
         $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
     }
  
     $('<div id="' + TableID + '_tableFix"></div>'
     + '<div id="' + TableID + '_tableHead"></div>'
     + '<div id="' + TableID + '_tableColumn"></div>'
     + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
  
  
     var oldtable = $("#" + TableID);
  
     var tableFixClone = oldtable.clone(true);
     tableFixClone.attr("id", TableID + "_tableFixClone");
     $("#" + TableID + "_tableFix").append(tableFixClone);
     var tableHeadClone = oldtable.clone(true);
     tableHeadClone.attr("id", TableID + "_tableHeadClone");
     $("#" + TableID + "_tableHead").append(tableHeadClone);
     var tableColumnClone = oldtable.clone(true);
     tableColumnClone.attr("id", TableID + "_tableColumnClone");
     $("#" + TableID + "_tableColumn").append(tableColumnClone);
     $("#" + TableID + "_tableData").append(oldtable);
  
     $("#" + TableID + "_tableLayout table").each(function () {
         $(this).css("margin", "0");
     });
  
  
     var HeadHeight = $("#" + TableID + "_tableHead thead").height();
     HeadHeight += 2;
     $("#" + TableID + "_tableHead").css("height", HeadHeight);
     $("#" + TableID + "_tableFix").css("height", HeadHeight);
  
  
     var ColumnsWidth = 0;
     var ColumnsNumber = 0;
     $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
         ColumnsWidth += $(this).outerWidth(true);
         ColumnsNumber++;
     });
     ColumnsWidth += 2;
     if ($.browser.msie) {
         switch ($.browser.version) {
             case "7.0":
                 if (ColumnsNumber >= 3) ColumnsWidth--;
                 break;
             case "8.0":
                 if (ColumnsNumber >= 2) ColumnsWidth--;
                 break;
         }
     }
     $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
     $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
  
  
     $("#" + TableID + "_tableData").scroll(function () {
         $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
         $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
     });
  
     $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
     $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
     $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
     $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
  
     if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
         $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
         $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
     }
     if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
         $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
         $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
     }
  
     $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
     $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
     $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
     $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
 }
</script>

三、HTML代码

 <table id="ss" border="0" cellpadding="3" cellspacing="0" class="scrolltable">
  <thead>
   <tr>
     <th rowspan="3">h1</th>
     <th colspan="5">h2</th>
   </tr>
   <tr>
     <th colspan="2">h22</th>
     <th colspan="2">h44</th>
     <th rowspan="2">h6</th>
   </tr>
   <tr>
     <th >h222</th>
     <th >h333</th>
     <th >h444</th>
     <th >h555</th>
   </tr>
  </thead>
   <tr>
     <td><input type="checkbox" name="checkbox" value="checkbox">a</td>
     <td>单元格2</td>
     <td>单元格3</td>
     <td>单元格4</td>
     <td>单元格5</td>
     <td>单元格5</td>
   </tr>
   <tr>
     <td><input type="checkbox" name="checkbox2" value="checkbox">b</td>
     <td>单元格2</td>
     <td>单元格3</td>
     <td>单元格4</td>
     <td>单元格5</td>
     <td>单元格5</td>
   </tr>
   <tr>
     <td nowrap><input type="checkbox" name="checkbox3" value="checkbox">c</td>
     <td nowrap>单元格2</td>
     <td nowrap>单元格3</td>
     <td nowrap>单元格4</td>
     <td nowrap>单元格5</td>
     <td nowrap>单元格5</td>
   </tr>
   <tr>
     <td><input type="checkbox" name="checkbox4" value="checkbox">d</td>
     <td>单元格2</td>
     <td>单元格3</td>
     <td>单元格4</td>
     <td>单元格5</td>
     <td>单元格5</td>
   </tr>
   <tr>
     <td><input type="checkbox" name="checkbox5" value="checkbox">e</td>
     <td>单元格2</td>
     <td>单元格3</td>
     <td>单元格4</td>
     <td>单元格5</td>
     <td>单元格5</td>
   </tr>
   <tr>
     <td><input type="checkbox" name="checkbox6" value="checkbox">f</td>
     <td>单元格2</td>
     <td>单元格3</td>
     <td>单元格4</td>
     <td>单元格5</td>
     <td>单元格5</td>
   </tr>
   <tr>
     <td><input type="checkbox" name="checkbox7" value="checkbox">g</td>
     <td>单元格2</td>
     <td>单元格3</td>
     <td>单元格4</td>
     <td>单元格5</td>
     <td>单元格5</td>
   </tr>
  </table>

四、效果展示