[HTML] TABLE 테이블 첫 행 스크롤 고정

개요

데이터 행의 갯수가 많아서 첫 머리행 컬럼을 고정시키고 싶다

엘셀에서는 틀고정이 있는데 찾아보니 HTML도 동일한 기능이 있다.

 

<style>
th {
   background-color : #f2f2f2;
   position: sticky ;
   top: 0
   z-index: 1;
}
</style>

 

position: sticky;

top: 0;

을 함께사용하여 스크롤을 내려도 첫행을 상단에 고정시킨다.

 

z-index 속성은 CSS에서 요소의 쌓임 순서(z-order)를 지정하는 데 사용되고, 
요소가 겹쳐 있을 때, z-index 값이 더 큰 요소가 더 위에 표시한다 크기가 작을수로 우선순위가 높음 
1로 설정