여러 테이블 헤더에 대해 끈적한 헤더를 만드는 방법은 무엇입니까?

Question

그래서 여러 행과 열이있는 여러 테이블이 있습니다. 정보가 거대하기 때문에 스크롤 할 때 표 머리글을 맨 위에 고정하고 싶습니다. 하나의 헤더가 오면 이전 메시지가 숨겨지고 현재 메시지가 고정됩니다. 당신은 내가 테이블의 위치와 테이블이 어디 볼 ​​수있는 테이블의 마지막 행으로 연주 내 코드에서 볼 경우

function makeTableHeadersSticky(tableId) { 

var thArr = $(tableId + " th"); 
var thWidthsArr = []; 
var calcWidth = 0; 
$(tableId + " th").each(function(){ 
    calcWidth = $(this).css("width"); 
    thWidthsArr.push(calcWidth); 
}); 

var pos = $(tableId).offset(); 

var thTop = pos.top + "px"; 

var count = 0; 
$(tableId + " tr:first-child > th").each(function(){ 
    $(this).css("width", thWidthsArr[count]); 
    count++; 
}); 
count = 0; 

$(tableId + " tr:last-child > td").each(function(){ 
    $(this).css("width", thWidthsArr[count]); 
    count++; 
}); 

$(window).scroll(function() { 

    //var firstRow = $(tableId + " tr:first-child").offset(); 
    var lastRow = $(tableId + " tr:last-child").offset(); 
    var w = $(window); 
    //console.log("(first,last): ("+(firstRow.top-w.scrollTop())+","+(lastRow.top-w.scrollTop())+")"); 

    if(($(window).scrollTop() > pos.top) && (lastRow.top-w.scrollTop() >= 0)) { 
     $(tableId + " tr:first-child").css("position", "fixed"); 
     $(tableId + " tr:first-child").css("top", "0px"); 
     $(tableId + " tr:first-child").css("left", "9px"); 
    } else {       
     $(tableId + " tr:first-child").css("position", "static"); 
     $(tableId + " tr:first-child").css("top", thTop); 

    } 
}); 

} 

makeTableHeadersSticky("#myTable"); 

:

이

내가 지금까지 가지고있는 JS 코드입니다. 이렇게하면 머리글 위치를 고정 또는 고정으로 설정할 수 있습니다.

은 여기 내 jsfiddle

Answer 1

모든 것이 여기에 잘 작동합니다. 당신은 두 번째 테이블의 makeTableHeadersSticky 함수를 호출 생략 :

makeTableHeadersSticky("#myTable2"); 

demo