Html 테이블 해더 고정하기

<link href="../Css/forecastTable.css" rel="stylesheet" type="text/css" >

.tr_table_fix_header
{
 position: relative;
 top: expression(this.offsetParent.scrollTop);
 z-index: 20;
}

</link>

 

<div>
<table>
 <tr class="tr_table_fix_header">
  <td>번호</td>
  <td>제목</td>
  <td>작성자</td>
 </tr>
 <tr>
  <td>1.</td>
  <td>테이블 해더 스크롤 고정</td>
  <td>한연석</td>
 </tr>
</table>
</div>

 

스타일 속성 중 top: expression(this.offsetParent.scrollTop); 부분이 테이블 헤더를 고정 시켜주는 속성입니다. 자신의 offsetParent 객체를 지정하여 offsetParent 의 scrollTop 스크롤 수치 만큼 <tr> 태그를 이동시킵니다. 속성 중 position: relative; 부분도 반드시 지정되어야 하는 부분입니다.

테이블 헤더를 이동 시키는 것을 약간 변경하면 Column에 대한 고정도 가능합니다.

.td_table_fix_white_fc
{
 position: relative;
 left: expression(this.offsetParent.firstChild.scrollLeft);
 z-index: 10;
}

헤더를 고정시켰던 클래스와 별차이 없으며, left: expression(this.offsetParent.firstChild.scrollLeft);
 부분만 약간 틀립니다. Top과 달리 해당 스타일은 Td에 정의 되기 때문에 offsetParent.firstChild으로 <div> 객체를 찾아 <div> 객체의 scrollLeft 속성 값을 설정합니다.

 

offsetParent : 자신의 부모 객체를 가져옵니다.

<tr>에서는 <table>의 부모객체를 가져옵니다. 위 예에서는 <table>을 감싸고 있는 <div> 객체를 가져옵니다. [div>table>tr]에서 tr의 offsetParent 는 div를 가져옵니다.

<td>에서는 <table>의 부모 객체를 가져옵니다. [table>tr>td>div>table>tr>td>]의 구조로 되어 있는 순서에서 두번째 td의 offsetParent 는 첫번째 td를 가져옵니다. 여기서 offsetParent 의 firstChild는 div 객체를 가져오게 됩니다.

[출처] Html 테이블 해더 고정하기|작성자 내일은