[CSS] 테이블 헤더(thead) 고정하기

 

 

1. position: sticky

전에 작업할 때 thead를 고정하기 위해 position: absolute를 써봤는데 th와 td의 너비가 다 깨져서 제어하기 어려웠다.
이번에 작업할 때는 position: sticky를 쓰니까 너비에 관한 문제가 없어서 제어하기 정말 편했다.

table {
  position:sticky;
  top:0;
}

 

 

2. thead의 border 투명화 문제

하지만 문제가 있었다. thead의 border가 투명해져서 border 하단의 내용이 보였다.
그걸 해결하기 위해서 간단한 코드만 추가해주면 됐다.

table {
  position:sticky;
  top:0;
  border-collapse:separate;
  border-spacing:0;
}

 

 

---

 

🔗 참고 사이트:

- [HTML]테이블 헤더 고정하는 방법
- 테이블에서 sticky로 컬럼 고정시의 border투명화 현상 해결