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

CSS와 고정 헤더를 사용하여 스크롤 가능한 테이블을 만드는 방법

웹 개발에서는 많은 양의 데이터가 포함된 테이블을 생성해야 하는 경우가 많습니다. 스크롤이 필요합니다. 그러나 테이블 본문을 스크롤하는 동안 고정된 헤더를 유지하는 것은 어려울 수 있습니다. 이 효과를 얻을 수 있는 방법은 다음과 같습니다.

HTML 구조

먼저 HTML 구조가 올바른지 확인해야 합니다. 스크롤 막대가 있는 외부 div, 테이블이 포함된 내부 div가 있고 테이블 헤더는 내의 요소 및 테이블 데이터 element.

<div>

CSS 스타일

이제 CSS를 사용하여 테이블 스타일을 지정해야 합니다.

/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}

추가 고려 사항

모든 헤더와 데이터 셀이 포함되어 있는지 확인하세요. 올바른 정렬을 위한 요소입니다. 다양한 열 너비를 원하는 경우 CSS에서 n번째 하위 선택기를 사용하세요.

참고: 이 접근 방식은 작은 테이블에 적합합니다. 매우 큰 테이블의 경우 가상화 또는 타사 라이브러리와 같은 다른 기술을 사용하는 것이 좋습니다.

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