고정 헤더가 있는 CSS 전용 스크롤 가능 테이블을 어떻게 만들 수 있습니까?

고정 헤더가 있는 CSS 전용 스크롤 가능 테이블

과제:

목표는 고정 헤더가 있는 스크롤 가능 테이블을 만드는 것입니다. CSS만 사용하여 브라우저 간 호환성을 보장하고 다음 사항을 충족하는 헤더 기준:

• 머리글, 바닥글, 콘텐츠 행 간의 열 정렬 유지
• 콘텐츠가 세로로 스크롤되는 동안 머리글과 바닥글 고정 유지
• JavaScript 또는 jQuery에 의존하지 마세요
• 제공되는 테이블 태그(table, colgroup, col, thead, tbody, tfoot, tr, th, td)

Position: Sticky를 사용하는 솔루션:

Position: Sticky에 대한 지원은 이 솔루션을 구현하기 전에 확인해야 합니다. W3C에 따르면 고정 위치 상자는 상대적 위치 상자와 유사한 방식으로 배치됩니다. 그러나 오프셋은 스크롤 상자가 있는 가장 가까운 조상 또는 스크롤 상자가 있는 조상이 없는 경우 뷰포트를 기준으로 계산됩니다.

이 동작은 정적 헤더의 동작과 일치합니다. 테이블 셀 요소(th)에 고정 위치 속성을 할당합니다. 테이블은 할당된 크기를 준수하는 블록 요소가 아니기 때문에 스크롤 오버플로를 정의하는 데 래퍼 요소가 사용됩니다.

예:

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

위 내용은 고정 헤더가 있는 CSS 전용 스크롤 가능 테이블을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!