고정 헤더가 있는 CSS 전용 스크롤 가능 테이블을 만드는 방법은 무엇입니까?

고정 머리글이 있는 CSS 전용 스크롤 가능 테이블

이 질문에서 사용자는 CSS를 사용하여 머리글과 바닥글이 고정된 스크롤 가능 테이블을 생성하려고 합니다. 오직. 구체적인 요구 사항은 다음과 같습니다.

• 머리글, 바닥글, 콘텐츠 행 간의 열 정렬 유지
• 콘텐츠가 세로로 스크롤되도록 허용하면서 머리글과 바닥글을 고정한 상태로 유지
• HTML 테이블 태그와 CSS 규칙만으로 이를 달성
• 크로스 브라우저 보장 호환성

답변

가능한 해결책 중 하나는 위치: 끈끈한 속성을 활용하는 것입니다. W3C에 따르면 position:sticky는 스크롤 상자 또는 상위 스크롤이 없는 경우 뷰포트를 사용하여 상위 요소와 관련하여 요소의 위치를 ​​정의합니다.

그러나 특정 브라우저(예: Chrome, IE, Edge)에서는 문제가 발생했습니다. 위치를 할당할 때: 테이블 헤더 행( 또는 )에 고정됩니다. 테이블에 적합한 것으로 보이는 또 다른 접근 방식은 테이블 셀()에 할당하는 것입니다.

원하는 효과를 얻으려면 사용자가 다음 코드를 고려할 수 있습니다.

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

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

이 코드는 스크롤 가능한 영역을 설정하기 위해 Overflow: auto를 사용하여 div의 테이블을 래핑합니다. 표 헤더에는 고정 위치가 할당되어 콘텐츠가 수직으로 스크롤될 때 고정된 상태를 유지합니다.

미적 측면을 위한 추가 스타일

스니펫에는 헤더를 향상하기 위한 추가 CSS 스타일이 포함되어 있습니다. 테이블의 모양은 다르지만 고정 헤더가 있는 스크롤 가능한 테이블의 주요 기능에는 이러한 미학이 필수적인 것은 아닙니다.

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