HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

        最近在做一个项目，由于列表比较长，产生了纵向滚动条，这个时候拖动导致一些重要的信息就会看不到，很不方便。这个时候如果能给这几列重要的信息固定住，只拖动后面的列就显得格外重要了，我在网上也看了很多的例子，都不是很符合，最后自己尝试出了方法。测试过兼容的浏览器有谷歌，火狐，IE11！其他的浏览器没做过测试，各位自己看吧！好了，话不多说，效果如下图所示：

 

直接看代码吧！需要注意的是需要引入jquery的js包，这个我就不占代码了！可以参考此页面进行调整看效果，也可以移步到文件列表进行下载完整版代码！

css样式代码：

/*!
 * Copyright &copy; 2012-2013 <a href="https://github.com/thinkgem/jeesite">JeeSite</a> All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
.table {margin-bottom:8px;background-color:#edf3f7;}
.table th, .table td {vertical-align:middle;text-align: center;}
.table td i{margin:0 2px;}
.table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th{background-color:#ffffff}
.table-nowrap td {width:200px;max-width:175px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.table-hoveroa tbody tr:hover>td,.table-hoveroa tbody tr:hover>th{background-color:#72BFEA}

table#contentTable thead th{background:#bbe1f9;text-align:center;}
#contentTable_tableHeadClone thead th {
    background: #bbe1f9;
    text-align: center;
}
#contentTable_tableFixClone thead th {
    background: #bbe1f9;
    text-align: center;
}

js代码：

/* 锁定表头和列 demon、冷漠
  * 
  * 参数定义
  *   table - 要锁定的表格元素或者表格ID
  *   freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0
  *   freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0
  *   width - 表格的滚动区域宽度
  *   height - 表格的滚动区域高度
  */
function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) {
    //获取冻结行数或者列数
    if (typeof(freezeRowNum) == 'string'){
    	freezeRowNum = parseInt(freezeRowNum)
    }
    if (typeof(freezeColumnNum) == 'string'){
    	freezeColumnNum = parseInt(freezeColumnNum)
    }
    //获取table
    var tableId;
    if (typeof(table) == 'string') {
        tableId = table;
        table = $('#' + tableId);
    } else{
    	tableId = table.attr('id');
    }
    /*** 生成最外层的DIV用来承载内部的四个DIV*/
    var divTableLayout = $("#" + tableId + "_tableLayout");
    if (divTableLayout.length != 0) {
        divTableLayout.before(table);
        divTableLayout.empty();
    } else {
        table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
        divTableLayout = $("#" + tableId + "_tableLayout");
    }       
     /**
      * 根据需要页面table定义的属性 需要冻结的行或者列 ，对应的拼接字符串用于生成不同的DIV  【如果行列同时冻结：生成总共四个DIV】【单独冻结行或列，仅需要生成两个DIV】
      * 这个四个DIV都是包括数据在内，完全克隆了原本的table，
      */
     var html = '';
     if (freezeRowNum > 0 && freezeColumnNum > 0){
    	 html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>';
     }
     if (freezeRowNum > 0){
    	 html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>';
     }
     if (freezeColumnNum > 0){
    	 html +=