[CSS] table header 상단에 고정시키기

<thead>가 스크롤을 내려도 페이지 최상단에 고정되도록 하려면 CSS의 position: sticky 속성을 사용할 수 있습니다.

 

 

1. <table>을 감싸는 <div>에 길이를 설정한다.

나는 max-height:80vh로 화면의 길이에 따라 유동적으로 변하게 높이를 설정해주었다.

<style>
    .table-wrap {
        max-height: 80vh; 
    }
</style>

2. thead th에 css 설정을 해주었다.

$(document).ready(function(){
    	
    	const $tableHead = $('thead th');
    	
    	$tableHead.css({
            'position': 'sticky',
            'top': '0',
            'z-index': '2',
            'background-color': '#f2f2f2'
        });
       
 ... 생략