[HTML, CSS] 테이블 header 고정(fixed)

table header 고정
테이블의 thead or thead > tr 에 아래 소스를 넣으면 끝!

 

table thead tr {
    position: sticky;
    top: 0px;
    background-color: gray !important;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    box-sizing:border-box;
}

 

문제는 스크롤시 header가 fixed는 되는데 고정헤더 검정 border가 투명화되는 현상이 발생한다.

 

이 때는 아래 코드를 넣어주자

table {
border-collapse: separate;
border-spacing: 0;
}

 

그럼 스크롤 시 테이블 헤더 검정 border가 사라지지않고 남아있는걸 볼 수 있다.

 

 

출력화면

 

목록1	목록2	목록3	목록4	목록5	목록6	목록7	목록8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8
1	2	3	4	5	6	7	8