테이블 헤더 스크롤 고정

테이블 스크롤시 헤더가 사라져 불편한 경우가 있어 제작...

 

1. js

;(function($){
 //테이블 헤더 고정
 $.fn.tableFixedHeader = function() {
  return this.each(function() {
   var obj = $(this);
   //Table,THead,TBody 태그가 있는지 확인
   var hasTable = obj.find("table").size() > 0;
   var hasTHead = obj.find("thead").size() > 0;
   var hasTBody = obj.find("tbody").size() > 0;
   if(hasTable && hasTHead && hasTBody) {
    //div width
    var parentDivWidth = obj.innerWidth();
    //div height
    var parentDivHeight = obj.innerHeight();
    //픽스된헤더 삭제
    obj.find('div.custom_fixed_header').remove();
    //div안에 테이블을 감싸는 새로운 div 생성
    if (obj.find('div.custom_tbody').size() == 0) {
        obj.wrapInner('
');
    }
    //테이블
    var $table = obj.find('div.custom_tbody table');
    var tableWidth = parentDivWidth;
    //헤더 th width 삭제
    $table.find('thead tr:first th').each(function() {
        $(this).removeAttr('width');
    });
    //헤더 height
    var headerHeight = $table.find('thead').outerHeight();
    //tbody height = obj div height - header height
    //tbody width = obj div width
    var tBodyHeight = parentDivHeight - headerHeight;
    obj.find('div.custom_tbody').css({'width':parentDivWidth + 'px', 'height':tBodyHeight + 'px'});
    $table.css('width','100%');
    //tbody 스크롤 생성
    if (($table.outerHeight() - headerHeight) >= tBodyHeight) {
     tableWidth = tableWidth - 20;
     obj.find('.custom_tbody').css('overflow','auto');
    } else if ($table.outerWidth() <= parentDivWidth) {
     obj.find('.custom_tbody').css('overflow','hidden');
    }
    $table.css('width',tableWidth+'px');
    //헤더 생성
    obj.find('div.custom_fixed_header').remove();
    obj.prepend('
');
    obj.find('div.custom_fixed_header').css({'width':parentDivWidth + 'px', 'height':$table.find('thead').outerHeight() + 'px'});
    //헤더 width 변경
    $table.find('thead tr:first th').each(function() {
     $(this).attr('width',$(this).width()+'px').attr("style","background: #ebf0f4;padding: 7px 0;color: #555;font-size: 13px;text-align: center;line-height: 14px;");
    });
    //테이블 헤더 복사
    var tableHeader = $table.find('thead');
    tableHeader.clone().appendTo('div.custom_fixed_header table');
    $table.css({'margin-top':-(obj.find('div.custom_fixed_header').height())+'px'});
    $('.custom_fixed_header').css("background","#ebf0f4");
   }
  });
 };
})(jQuery);

2. 사용법

$("#tableParent").tableFixedHeader();

광고 : https://play.google.com/store/apps/details?id=com.ljo.blocktube

이게불낙이야! - 광고차단 - Google Play 앱