테이블 헤드 고정

$(function(){
    fix_table();
    
    // 리사이징이 끝난 후 실행
    $(window).resize(function() {
        if(this.resizeTO) {
            clearTimeout(this.resizeTO);
        }
        this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
        }, 500);
    });
    $(window).on('resizeEnd', function() {
        fix_table();
    });
});
 
//테이블 헤드 고정시 텍스트 중앙 정렬
function fix_table(){
    $(".th_inner").each(function(index){
        $(this).width($(".table_fix thead th").eq(index).width());
    });
}

.table_fix{position:relative;padding-top:30px;border-bottom:1px solid #dbdbdb;}
.table_fix .table_head{position:absolute;top:0;width:100%;height:30px;border-top:2px solid #262523; border-bottom:1px solid #6f6f6e;background:#f5f5f5;}
.table_fix .table_body{max-height:195px;overflow-x:hidden;overflow-y:auto;}
.table_fix .table_body .th_inner{position:absolute;top:2px;height:30px;line-height:30px;text-align:center;}
.table_fix table {width:100%;}
.table_fix thead th{/* padding:7px 5px;  text-align:center;  */font-weight:normal;color:#242424;/* border-bottom:1px solid #a9a9a9; background:#f5f5f5;*/}
.table_fix td{padding:10px; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; text-align:center;}
.table_fix .last_tr td{border-bottom:0;}
.table_fix td.last{border-right:0;}

css만으로 테이블 헤더 고정이 가능

javascript는 헤더 텍스트의 중앙정렬을 위한 것, th의 넓이 값을 구하고 실질적인 제목에 넓이 값을 적용하여 중앙정렬을 가능하게 만듦

리사이징시 리사이징이 끝난 후 한번만 스크립트를 실행하도록 함