CSS만 사용하여 고정 헤더가 있는 스크롤 가능한 테이블을 어떻게 만들 수 있나요?

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

이 질문에서는 고정 헤더가 있는 스크롤 가능 테이블을 생성하기 위한 CSS 전용 솔루션이 필요합니다. 이 솔루션의 요구 사항은 다음과 같습니다.

1. 머리글, 바닥글, 콘텐츠 행 전체에서 열 정렬 유지
2. 콘텐츠가 세로로 스크롤되는 동안 머리글과 바닥글이 고정된 상태로 유지되도록 허용
3. 자바스크립트 없이 테이블 관련 HTML 태그(table, tr, th, td 등)만 활용하거나 jQuery

Position: Sticky를 사용한 솔루션

가능한 솔루션 중 하나는 position:sticky 속성을 사용하는 것입니다. 작동 방식은 다음과 같습니다.

위치 사용: 고정

고정 위치 지정은 스크롤을 통해 가장 가까운 조상에 대해 오프셋이 계산된다는 점을 제외하고 요소를 상대 위치에 할당합니다. 해당 조상이 없는 경우 상자 또는 뷰포트입니다. 이 동작은 고정된 테이블 헤더에 이상적입니다.

코드

다음 코드는 이 기술을 보여줍니다.

이 코드는 스니펫은 스크롤 막대가 있는 래퍼 div 내에 테이블을 배치합니다. position:을 테이블 헤더 내에서 번째 요소에 고정하면 콘텐츠가 수직으로 스크롤될 때 헤더가 고정된 상태로 유지됩니다.

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