테이블 본문을 스크롤하는 동안 테이블 헤더를 고정된 상태로 유지하는 방법은 무엇입니까?

스크롤링 본문으로 테이블 헤더 수정

본문이 스크롤되도록 허용하면서 고정된 테이블 헤더를 유지하는 것은 웹 개발의 일반적인 요구 사항입니다. 이를 달성하려면 다음 접근 방식을 사용하세요.

1. 두 개의 중첩 요소로 테이블 콘텐츠 래핑:

• 외부 테이블 요소(예: #mainTable)를 생성하여 전체 테이블을 보관합니다.
• 내부 테이블 요소(예: #mainTable)를 생성합니다. , #innerTable)에 필요한 테이블 본문을 포함합니다. 스크롤하세요.

2. 외부 테이블 높이 설정:

• CSS를 사용하여 외부 테이블에 고정 높이를 적용합니다(예: #mainTable { height: 500px; }).

3. 내부 테이블 위치 지정:

• CSS를 사용하여 외부 테이블 내에 내부 테이블을 절대적으로 배치합니다(예: #innerTable { position: 절대; 상단: 0; 하단: 0; 너비: 100%; }).

4. 헤더 수정:

• 위치 적용: 고정; 내부 테이블의 헤더 행(예: #innerTable th { position: Sticky; top: 0; }).

5. 스크롤 활성화:

• 내부 테이블의 높이가 외부 테이블의 높이를 초과하여 수직 오버플로가 발생하는지 확인하세요.
• CSS를 사용하여 내부 테이블에서 스크롤을 활성화하세요(예: #innerTable { 오버플로: 자동; }).

예:

<div></div>

위 내용은 테이블 본문을 스크롤하는 동안 테이블 헤더를 고정된 상태로 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!