[CSS] html 테이블 헤더 고정 (table thead 고정) tbody 스크롤(scroll)

table 영역 중 thead 는 고정시키고 tbody 는 특정 크기 이상일 경우 스크롤 할 수 있게 구현

 

[ HTML ]

<div id="testTable" class="form-group" style="height:600px; overflow:auto; margin:40px 0 0 0; border-bottom:1px solid #e2e7eb;"> 
  <div class="table-fixed-header-wrap"> 
    <div id="fixed-header-scroll" class="fixed-header-scroll"> <!-- 스크롤영역 (tbody) --> 
      <div class="fixed-header-bg"></div> 
      <table class="testTableArea table-striped" style="width:100%;"> 
        <thead> 
           <tr> 
             <th style="width:89px"><div class="fixed-th" style="width:89px">이름</div></th> 
             <th style="width:71px"><div class="fixed-th" style="width:71px">부서</div></th> 
             <th style="width:269px"><div class="fixed-th" style="width:269px">직급</div></th> 
             <th style="width:89px"><div class="fixed-th" style="width:89px">직책</div></th> 
             <th style="width:135px"><div class="fixed-th" style="width:135px">생년월일</div></th> 
           </tr> 
        </thead> 
        <tbody> 
        </tbody> 
      </table> 
    </div> 
  </div> 
</div>

[ CSS ]

/* 스크롤 스타일 정의 */ 
.table-fixed-header-wrap { 
  position:relative; box-sizing:border-box; padding-top:33px; /* 기준점과 헤더영역 확보 */ 
  width:670px; height:100%; margin:0 auto; /* 디자인에 따라 가로 세로 값 설정 */ 
} 

/* 실제 스크롤 영역 설정 */ 
.table-fixed-header-wrap .fixed-header-scroll { height:566px; overflow-x:hidden; overflow-y:auto; } 
.table-fixed-header-wrap .fixed-header-bg { 
  position:absolute; left:0; top:0; width:100%; /* 헤더영역 위치 */ 
  height:33px; border:1px solid #ddd; /* 테이블 헤더와 동일한 스타일 적용 */ 
} 
.table-fixed-header-wrap .fixed-th { position:absolute; top:8px; text-align:center; } /* th 하위의 타이틀 위치 설정 */ 
.table-fixed-header-wrap .testTableArea thead th { height:0; border:none; } /* 실제 테이블의 th 는 가림 */ 
.table-fixed-header-wrap .testTableArea tbody tr { border-bottom:1px solid #ddd; } 

.testTableArea thead tr th { text-align:center; }