차림

2021년 7월 26일

표 table에서 맨 윗줄 헤더 th 고정하기

표가 세로로 많이 길면, 아래쪽 내용을 볼 때 어떤 칸이 어떤 품목에 해당하는지 헷갈린다. 엑셀에서처럼 맨 윗줄을 고정할 수 있을까?

찾아보니 방법이 있었다.

tablediv로 감싼다. div에 높이를 지정하고 세로 스크롤바가 나올 수 있게 overflow를 지정한다. thposition: sticky; top: 0;를 지정해준다. 배경색은 tr에 넣으면 안 되고 th에 넣어야 된다고 한다.

자세한 내용은 테이블 헤더 고정하는 방법을 볼 것.

th에서 rowspan을 쓸 경우 생기는 문제 해결은 테이블 여러 줄의 헤더 고정하는 방법에 나와 있다.

아래는 현재 내가 쓰는 코드에서 해당 부분을 가져온 거.


div.scroll_container { height: 700px; overflow: auto; }
table.data { background:#999; border-spacing: 1px;} /* 선 넣기 */
table.data th { background: #f1f1f1; position: sticky; top: 0;}

그런데 이 코드에서처럼 표에 배경색과 셀 간격을 넣는 방식 (둘째 줄)으로 칸마다 선을 넣으면, 스크롤바를 내릴 때 맨 윗줄에 있는 위 아래 선이 없어지는 문제가 있긴 하다. 보드게임긱 1인 게임 투표 순위에 이 코드를 적용하고 있는데, 맨 윗줄 선이 어떻게 사라지는지 확인해 볼 것.

목록