Html 테이블 헤더 고정

Question

.fixed-table-container{
  width:780; height:250; overflow:auto;
}
#resTable01{
  width:780 ; table-layout: fixed;
}
#resTable01 thead td{
  position:sticky; top:0;
}


   
            ....
        
        < /tbody>
     <	able>
<\div> 
테이블 헤더를 고정하려고 하는데요
Tbody 가로세로 스크롤하면서 헤더 고정을 하려고합니다.

HJOW · Answer

스크롤이 있는데 테이블 헤더는 그자리에 그대로 남아있기를 원하시죠?

이거 다른 라이브러리 안쓰면 생각보다 어렵습니다.

(그래서 보통 jqGrid 같은 그리드 UI 라이브러리를 사용합니다.)

순수 HTML/자바스크립트로 구현하시려면 테이블을 둘로 나눠서

하나는 위쪽에 헤더만,

하다는 아래쪽에 데이터 + 스크롤 영역

이렇게 구성해야 하고,

스크롤바가 위치할 공간을 테이블 내부에 마련해줘야 하는데 이게 브라우저마다 크기가 다르거든요...

그래서 맨 마지막 컬럼을 가로길이 나머지를 차지하게 만들고
(colgroup 에서 맨 마지막 col 에 스타일 안주면 됨)

헤더 테이블에 컬럼 하나를 마지막에 새로 추가해서 스크롤바 전용 헤더를 만들어줘야 합니다...

그냥 라이브러리 사용하심이...

Html 테이블 헤더 고정

1개의 답변

Q&A 목록