table标签冻结列示例

来源：冻结列fixTable方法

---

用前端框架的话，column基本都有frozen属性。只用单纯的table，就需要借助js了。网上看到纯css版本的，根本不起作用。
先看效果图：

image.png

HTML代码：

<div id="divReport" style="width: 600px;">
    <table id="tableContent" class="define-table">

    </table>
</div>

CSS代码：

<style>
.define-table{
    border-collapse:collapse;
    border-spacing:0;
    border-left:1px solid #888;
    border-top:1px solid #888;
}
.define-table td{
    border-right:1px solid #888;
    border-bottom:1px solid #888;
    padding:5px 15px;
    height: 40px;
}
.define-table tr:nth-child(even){
    background-color: #ccc;
}
</style>

js代码：

<!-- jquery依赖-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

$(function(){
    var html = '<tr>';
    for (var i = 0;i < 50;i++){
        html += '<td>'+i*100+'</td>';
    }
    html += '</tr>'
    $("#tableContent").append(html);
    $("#tableContent").append(html);
    
    var width = $("#divReport").width();
    var height = $("#divReport").height();
    fixTable("tableContent", 4, width, height+20);
})
/**
 *
 * @param tableID表id
 * @param fixColumnNumber冻结列数
 * @param width
 * @param height
 * @constructor
 */
function fixTable(tableID, fixColumnNumber, width, height) {
    if ($("#" + tableID + "_tableLayout").length != 0) {
        $("#" + tableID + "_tableLayout").before($("#" + tableID));
        $("#" + tableID + "_tableLayout").empty();
    }
    else {
        var lWidth = width -25;
        $("#" + tableID).after("<div id='" + tableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + lWidth + "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": "white" });
    $("#" + tableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "white" });
    $("#" + tableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 15,"position": "relative", "z-index": "40", "background-color": "white" });
    $("#" + tableID + "_tableData").css({ "overflow-x": "scroll", "overflow-y": "hidden", "width": width-ColumnsWidth-10, "height": height+2, "position": "relative", "z-index": "35","left":ColumnsWidth});
    $("#" + tableID + "_tableData").find($("#" + tableID)).css("margin-left",-ColumnsWidth);
    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()+2);
        $("#" + tableID + "_tableData").css("height", $("#" + tableID + "_tableColumn table").height() + 19);
    }
    $("#" + tableID + "_tableFix").offset($("#" + tableID + "_tableLayout").offset());
    $("#" + tableID + "_tableHead").offset($("#" + tableID + "_tableLayout").offset());
    $("#" + tableID + "_tableColumn").offset($("#" + tableID + "_tableLayout").offset());
    var _offset = $("#" + tableID + "_tableLayout").offset();
    $("#" + tableID + "_tableData").offset({top:_offset.top});

    //  if ($("#" + tableID + "_tableData").width() > $("#" + tableID).width()) { //自适应宽
    //      $("#" + tableID + "_tableData").width($("#" + tableID + "_tableLayout").width());
    //      $("#" + tableID).width($("#" + tableID + "_tableLayout").width());
    //  }
    //  $("#" + tableID + "_tableLayout").height($("#" + tableID + "_tableData").height());//自适应高
}