▲

GN⁺: 테이블 제목을 고정시켜 주세요

 (btxx.org)
4P by neo 9달전 | favorite | 댓글 1개

테이블 제목을 고정시켜주세요

  • 웹상에서 큰 데이터 세트나 테이블 레이아웃을 자주 접함.
  • 수백 개의 행이 있는 테이블에서 스크롤을 시작하면 문제가 발생함.
  • 테이블 헤더가 사라지면, 사용자는 각 열이 무엇과 연관되어 있는지 기억하기 어려움.

고정된 헤더

  • 고정된 헤더는 마법처럼 보이지만, 구현은 매우 쉬움.
  • thead에 단 두 개의 CSS 속성을 추가하기만 하면 됨:
    • position: sticky;
    • top: 0;
  • 전 세계적으로 약 96%의 지원률을 가진 sticky는 안정적으로 많은 브라우저를 지원함.
  • 사용자 경험 향상에도 도움이 됨.

GN⁺의 의견

  • 웹사이트에서 큰 테이블을 다룰 때, 사용자가 스크롤을 내려도 테이블의 제목을 쉽게 볼 수 있도록 하는 것은 사용자 경험을 크게 향상시킴.
  • CSS의 position: sticky; 속성을 사용하여 간단하게 테이블 헤더를 고정시킬 수 있음은 웹 개발자들에게 유용한 정보임.
  • 이 기능이 널리 지원되고 있어서, 웹 개발자들은 다양한 브라우저에서 안정적으로 이 기능을 구현할 수 있음을 알 수 있음.
▲
neo 9달전  [-]
Hacker News 의견
  • 한 축에서의 고정 헤더(sticky headers)는 가능하지만, CSS가 양 축에서 지원하는 날을 기다리고 있음: GitHub 이슈 링크
  • CSS 지식이 거의 없음에도 기능적인 웹 앱을 만들어왔음. 최근에 20,000행이 넘는 테이블에 고정 헤더를 시도했으나, Bootstrap 클래스나 Stack Overflow, GPT, CodePen의 제안을 시도해봐도 이상한 부작용이 발생했음. 하지만 이 글의 CodePen을 사용해서 2분 만에 해결하고 프로덕션에 적용함. 감사함을 표시.
  • position: sticky;를 사용해서 테이블 헤더를 고정하는 것이 쉬울 것 같지만, 테이블 내용에 어떤 작업을 하면 문제가 발생함. 예를 들어, 사용자가 테이블을 스크롤하고 페이지를 떠났다가 돌아왔을 때 스크롤 위치를 복원하는 기능을 추가했는데, 복원된 위치가 항상 한 줄 아래로 이동해 있음. 투명한 테이블 헤더를 통해 볼 때 원하는 줄이 맨 위에 있지만, 헤더가 겹쳐서 다음 줄이 첫 번째로 보임. 스크롤 위치를 헤더 높이를 고려해 조정하면 처음에는 잘 작동하지만, 때때로 몇 픽셀이 어긋남. 이는 테이블이 크기 때문에 스크롤 이벤트에 따라 지연 로딩을 하고 있고, 자동 테이블 레이아웃을 사용하고 있어서 때때로 헤더 셀이 너무 좁아져서 단어가 줄바꿈되고 전체 헤더 높이가 증가하기 때문임. 최종 해결책은 ResizeObserver를 헤더 요소에 생성하여 높이가 변경될 때 스크롤 위치를 동적으로 조정하는 것임. ResizeObserver 문서
  • 테이블 헤더의 테두리도 고정하고 싶다면, 다음과 같은 CSS 코드를 사용할 수 있음: 
    table thead:before {
  content: '';
  position: absolute;
  width: 100%;
  top: 0;
  border-top: 2px solid;
}

table thead:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  border-bottom: 1px solid;
}
  • 테이블 헤더가 자동으로 고정되었으면 좋겠음. 개발자들이 <th> 태그를 사용하는 추가 작업을 한다면, 그들이 원하는 동작일 가능성이 높음.
  • 명령줄에서는 헤더를 표준 오류(stderr)로, 본문을 표준 출력(stdout)으로 보내는 것이 좋음. 그렇지 않으면 정렬 시 헤더가 결과에 섞여 나올 수 있음.
  • Chrome은 과거에 position: sticky 속성을 <thead>와 <tr> 요소에서 사용하지 못하게 했었음: Chromium 이슈 링크
  • 고정 헤더 대신 제한된 뷰포트 높이를 사용하여 헤더가 항상 보이도록 하는 것을 제안함. 예를 들어 DataGridXL에서 그렇게 함: DataGridXL 링크 (작성자가 만든 것임을 밝힘)
  • CodePen 예제에서 top을 테두리를 고려하여 설정하면 (예: -1px 대신 0), 테이블 본문이 헤더 위로 흐르는 것을 방지할 수 있음. 두 가지 CodePen 예제를 비교함: 기존 CodePen과 개선된 CodePen
  • 일부는 "제발 하지 말라"고 말하고 싶어함: Hacker News 논의 링크
답변달기