CSS로 고정 테이블 헤더를 만드는 방법은 무엇입니까?

CSS로 테이블 헤더 수정

고정된 헤더가 있는 테이블을 만들면 특히 대규모 데이터세트를 처리할 때 가독성과 탐색 기능이 향상될 수 있습니다. CSS를 사용하여 이를 달성하는 방법을 살펴보겠습니다.

테이블 구조 정의

테이블에는 로 표시되는 헤더와 본문이 모두 포함되어야 합니다. 그리고 각각 요소. 각 행은 헤더 행을 포함한 요소.

헤더와 본문 분리

헤더 내용을 본문에서 분리하려면 thead와 tbody 모두에 대해 display: block을 사용하세요. 이렇게 하면 기본 테이블 레이아웃에서 분리됩니다.

본문에 스크롤 적용

가로 스크롤을 활성화하려면 tbody에 오버플로: 자동을 설정하고 높이를 적용하여 스크롤 가능한 영역.

너비 및 정렬 설정

th와 td 모두에 정적 너비를 설정하여 열을 정렬합니다. 헤더와 본문의 총 너비가 동일한지 확인하세요.

추가 CSS

열 너비를 더 효과적으로 제어하려면 최소 너비와 최대 너비가 있는 n번째 하위 선택기를 사용하세요. -너비 속성. 이를 통해 정렬을 유지하면서 다양한 열 크기를 허용합니다.

예제 코드

다음은 고정 헤더가 있는 테이블을 보여주는 코드 조각입니다.

table {
  width: 100%;
}

table tbody,
table thead {
  display: block;
}

table tbody {
  overflow: auto;
  height: 100px;
}

th,
td {
  width: 100px;
}

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