HTML 헤더, 좌측 스크롤 고정시키기

https://github.com/nitsugario/jQuery-Freeze-Table-Column-and-Rows

한번에 좌측과 헤더까지 고정시킬 때 사용하면 매우 편리한 MIT 오픈 소스
특히 colspan이 존재하게 될 경우 div로 좌측 TD column을 고정시키고자 할 경우 쉽지 않지만
이 소스를 사용하면 colspan까지 다 커버쳐줌

jQuery-Freeze-Table-Column-and-Rows-master.zip

0.07MB

사용방법은 css, js파일 그대로 복사한 후 
고정 스크롤 테이블 바깥에 DIV로 감싸고 
jQuery로 CongelarFilaColumna함수 호출할 때 몇개의 좌측 컬럼을 고정시킬것인지를 설정해주면 됨
첨부파일 중 html로 다양한 예제가 있으니 그대로 따라하면 쉽게 가능함.

다만 여러개의 테이블을 고정시켜 한 페이지에 보여줘야 할 경우 따로 테이블을 감싸고 있는 DIV의 절대 위치를 조절해줘야 함
$("#DIV_2").css({ top: $("#DIV_1").offset().top + $("#DIV_1").height() + 50 + "px" });
이런식으로 DIV_1이 처음 영역의 테이블을 감싸는 DIV이고 DIV_2가 나와야 할 경우 DIV_1의 위치와 높이값에 버퍼 50px을 주는 식으로 주면 됨

그리고 팁아닌 팁이지만
동적높이를 갖는 영역들인 경우 내 경우 700이하이면 그냥 그대로 출력하고 700이 넘으면 세로 스크롤이 나타나도록 height값을 조절해줌

가령 아래같은 구조인 경우
<div id="DIVTABLE_1">
   <table id="TABLE_1"></table>
</div>

<div id="DIVTABLE_2">
  <table id="TABLE_2"></table>
</div>

        $(".ContenedorTabla").width($("#TDCONTENT").width());
        if ($("#TABLE_1").height() < 700) {
            $("#DIVTABLE_1").height($("#TABLE_1").height());
        } else {
            $("#DIVTABLE_1").height(700);
        }

        if ($("#TABLE_2").height() < 700) {
            $("#DIVTABLE_2").height($("#TABLE_2").height());
        } else {
            $("#DIVTABLE_2").height(700);
        }