(CSS) table header 고정과 스크롤에 의해 border 투명화 현상 해결

1. table header 고정 방법

 

th가 한 줄일 경우 position : sticky 로 고정을 하면 된다.

th가 아래 이미지 처럼 두 줄일 경우 position : sticky과 top : ?px 로 상단에서 영역을 고정값을 준다.

이때 top의 크기는 해당 th의 height 만큼 주면 된다.

.result-table > thead > tr:first-child > th {
	position: sticky;
	top: 0;
	z-index: 1;
	border-bottom: 1px solid #d1d1d1;
}

.result-table > thead > tr:nth-child(2) > th {
	position: sticky;
	top: 40px;
	z-index: 1;
	border-bottom: 1px solid #d1d1d1;
}

 

위와 같이 하고 테이블을 스크롤 해보았더니

상단 헤더는 잘 고정이 되지만 border가 투명해지는 현상이 발생하였다.

 

스크롤 전

스크롤 후

 border가 투명해서 뒤배경 이미지의색깔로 보이게 된다.

해결방법 stackover flow

https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element

Border style do not work with sticky position element

 

스크롤 시에 border 투명화 현상은 브라우저가 테두리를 접을 때 양 옆 테두리가 하나로 겹쳐져서

(border-collaps: collapse) 하나로 겹쳐진게 스크롤과 함께 올라가 버기리 때문인 것으로 생각된다.

 

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

그래서 border-collapse를 separate로 분리하고

border-spacing: 0으로 주어 테이블 구성하는 셀간 간격을 주지 않았습니다.

 

고정된 테이블 헤더 스크롤시 border 투명화 현상을 해결하였습니다.