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 논의 링크