고정 헤더가 있는 스크롤 가능한 HTML 테이블을 어떻게 생성합니까?

스크롤 가능한 HTML 테이블 생성

HTML에서 다음 단계에 따라 세로로 스크롤 가능한 테이블을 표시할 수 있습니다.

1. div로 테이블 래핑: div 요소를 생성하고 테이블에 사용할 수 있는 수직 공간을 제한하기 위해 CSS 속성을 상대 위치와 고정 높이로 설정합니다.
2. 오버플로를 자동으로 설정: div의 오버플로 속성을 "auto"로 설정하여 표 내용이 div 높이를 초과하면 세로 스크롤을 활성화합니다.
3. 표 헤더에 위치 지정 적용: 표를 원하는 경우 스크롤하는 동안 헤더(thead)가 고정된 상태로 유지되도록 하려면 thead 요소의 위치 속성을 "절대"로 설정하고 위쪽, 왼쪽 또는 오른쪽 CSS 속성을 사용하여 위치를 지정하세요.
4. 테이블 열의 고정 너비를 설정하세요. 스크롤하는 동안 크기가 조정되지 않도록 테이블 열의 너비가 고정되어 있는지 확인하세요.

다음은 이러한 내용을 통합한 예입니다. 단계:

<div>

이 예에서 "table-wrapper" div에는 고정 높이가 있고 오버플로가 "auto"로 설정되어 세로 스크롤이 가능합니다. 테이블 헤더(thead)는 절대 위치를 가지며 상단에 고정되고 테이블 본문(tbody)에는 스크롤 가능한 데이터가 포함됩니다.

이 단계를 수행하면 다음과 같이 설정된 크기를 유지하는 HTML 테이블을 생성할 수 있습니다. 헤더를 고정하고 다양한 양의 데이터에 대해 본문을 스크롤할 수 있습니다.

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