테이블 헤더 고정 sticky

테이블 헤더 고정 sticky

 

thead 고정시키기

table의 tbody 내용이 많아지면, 스크롤에 넘어가지 않도록 thead를 고정시켜야 할 때 있다.

 

thead 고정하는 방법 - datagrid 라이브러리

이를 구현하기 위해 datagrid 라이브러리를 사용하는 것이 가장 안정적이고 편하기도 하겠지만,

단순히 thead의 고정만을 위해 datagrid 라이브러리를 사용하는 것은 비효율적이다.

 

thead 고정하는 방법 - <table>

<table> 만으로 thead를 고정시키는 방법에 대해 서치를 해보면 몇 가지 방법이 나오는데,

모든 상황을 만족시키는 방법은 없다.

특히, table-layout 속성을 변형(fixed) 시키면서까지 헤더 고정 기능을 구현하는 방법은,

순수 <table>이 가지고 있는 너무나 큰 장점들을 버리게 된다. (테이블을 둘러싼 DOM 요소에 유동적으로 반응하는 것 등등)

 

thead 고정하는 방법 - position sticky

이제까지 서치한 것 중에 가장 <table>의 속성을 잘 살리면서 심플하게 구현한 방법은 thead th에 position 속성을 sticky로 주는 방법이다.

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

 

thead 고정하는 방법 - position sticky 약점

하지만, 이 방법엔 큰 약점이 있다.

thead th에 적용한 css 디자인 요소들이 테이블을 스크롤한 순간 사라진다는 것이다. (background-color 속성만 사라지지 않는다.)

 

thead 고정하는 방법 - position sticky 해결방법

position sticky 속성을 활용하면서 css 디자인요소를 살릴 수 있는 방법이 없을까?

테이블 디자인이 어떠냐에 따라 trick을 써서 어느 정도 해결할 수 있다.

예를 들어, thead th에 위아래 border만 있는 디자인이라면,

아래의 방법으로 구현할 수 있다.