由於table是由tr、td等進行佈局的，所有不能單獨的對錶格中的某一行或者某一列進行定位或者固定之類的，但是工作中常常會有過長的表格需要處理，下面給大家介紹一種方法，保持原有的表格不變，在表格的上一層copy一個表格出來，對整個表格進行固定！

不多說，看程式碼！！！
CSS樣式如下(當然也可以自己更改)這都是在JS裡面要呼叫的

.LockRow /*固定行的樣式*/
{
    position: relative;
    top:0;
    z-index:2;
    border: 1px solid #bbc8c8;
}
.LockCell /*固定列的樣式*/
{
    position
 
: relative;
    left:0;
    z-index:2;
    border: 1px solid #bbc8c8;
}
.LockCross /*行列交叉處樣式*/
{
    z-index:3;
    border: 1px solid #bbc8c8;
}
.divBoxing /*外出div樣式*/
{
    clear:both;
    overflow-x: scroll;
    position:relative;
}
.tbLock /*設定單元格間隙的樣式*/
{
    border-collapse:collapse;
}
.lockRowCss{
    background-color
 
: white;
}
.lockRowBg
{
    background-image:url('/Styles/images/png_back.png');
    background-position:0 -960px;
    background-repeat:repeat-x;
    line-height:24px;
    border:1px solid #bbc8c8
}
.lockColumnBg {
    background-color: white;
    border-right: 1px solid #bbc8c8 !important;
    border-left
 
:1px solid #bbc8c8 !important;
}

下面是JS程式碼，直接拷過去就可以用

/**
 * Created by Blue on 2016/1/2.
 */
var n=0;
(function($) {
    $.extend($.fn, {
        TableLock: function(options) {
            var tl = $.extend({
                table:'lockTable',//table的id
                lockRow:1,//固定行數
                lockColumn:1,//固定列數
                width:'100%',//表格顯示寬度（實質是外出div寬度）
                //height:'100%',//表格顯示高度（實質是外出div高度）
                lockRowCss:'lockRowBg',//鎖定行的樣式
                lockColumnCss:'lockColumnBg'//鎖定列的樣式
            }, options);

            var tableId=tl.table;
            var table=$('#'+tableId);
            if(table){
                var box=$("<div class='divBoxing' id='divBoxing'></div>").scroll(function(){//在此處新增事件
                    $('.LockRow').css('top',$(this).attr('scrollTop')+'px');
                    $('.LockCell').css('left',$(this).attr('scrollLeft')+'px');
                });
                var Height=table.attr("height");//動態獲取內層table的高度，讓滾動條始終緊貼table的下部
                box.css('width',tl.width).css('height',Height);//設定高度和寬度
                //外層標籤只加一次，避免多次執行時出現縱向滾動條疊加
                if(n==0){
                    table.wrap(box);
                    n=1;
                }
                table.addClass('tbLock');
                if(tl.lockRow>0){
                    var tr;
                    for(var r=0;r<tl.lockRow;r++){//新增行鎖定
                        tr=table.find('tr:eq('+r+')').addClass('LockRow').addClass(tl.lockRowCss);
                        //設定交叉單元格樣式，除了鎖定單元格外還有交叉單元格自身樣式
                        for(var c=0;c<tl.lockColumn;c++){
                            if(tr){
                                tr.find('td:eq('+c+')').addClass('LockCell LockCross').addClass(tl.lockRowCss);
                            }
                        }
                    }
                }
                if(tl.lockColumn>0){
                    var rowNum=$('#'+tableId+' tr').length;
                    var tr;
                    for(var r=(tl.lockRow);r<rowNum;++r){
                        tr=table.find('tr:eq('+r+')');
                        for(var c=0;c<tl.lockColumn;++c){//新增列鎖定
                            tr.find('td:eq('+c+')').addClass('LockCell LockCross').addClass(tl.lockColumnCss);
                        }
                    }
                }
            }else{
                alert('沒有找到對應的table元素，請確保table屬性正確性！');
            }
        }
    });
})(jQuery);

下面是呼叫方法，由於我是基於jquery進行封裝的，所以呼叫的時候當然是要引入jquery檔案的哈，這裡就不多說了

 $.fn.TableLock({table:'表格的ID',lockRow:鎖定行數量,lockColumn:鎖定的列數量,width:'100%'})

再囉嗦一下，預設滾動條是緊貼著表格的下邊的，如果要自己單獨設定高度，就在呼叫的時候加上height，同時在JS檔案內部把 //height:’100%’刪除
還有 var Height=table.attr("height");也刪除
最後一點：box.css('width',tl.width).css('height',Height）裡面的Height改為t1.height