table thead sticky 적용시 보더 투명해지면서 tbody 겹쳐 보일때

원인 : border-collapse

해결방법 : border-collapse: separate; border-spacing: 0;

<div class="tableScroll">
	<table>
    		<thead></thead>
    		<tbody></tbody>
	</table>
</div>

.tableScroll{overflow: auto; height:calc(100vh - 340px)}
.tableScroll::-webkit-scrollbar{width:8px;height:8px;background-color:#131538}
.tableScroll::-webkit-scrollbar-thumb{border-radius:2px;background:rgba(28,79,151,0.7);border:1px solid #2b89d6}
.tableScroll::-webkit-scrollbar-track{border-radius:2px}
.tableScroll::-webkit-scrollbar-corner{background-color:transparent}
table{border-collapse: separate; border-spacing: 0;}
table thead {position: sticky; top: 0;}

 

이제 테이블 헤더 보더가 겹쳐 보이지 않는다.