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

Sticky CSS for Table Head - Chrome, FF, Edge

테이블 본문에 포함된 데이터가 오버플로될 수 있는 테이블이 있고 테이블 헤더를 원하는 경우 계속 보기 위해 CSS를 사용할 수 있습니다. JavaScript가 필요하지 않고 약간의 CSS만 필요한 간단한 솔루션에는 position: 고정 사용과 top 속성의 적절한 설정이 필요합니다.

아래 예에서는 tableFixHead의 테이블 클래스를 사용하여 테이블이 맞는지 확인합니다. Overflow: auto로 설정된 컨테이너 내부입니다. 이렇게 하면 헤더가 고정된 상태에서 테이블 본문이 컨테이너 내에서 오버플로될 수 있습니다.

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

테이블 자체 내부에서 이제 테이블 헤드의 요소가 다음 위치로 설정되어 있는 것을 볼 수 있습니다. . 즉, 컨테이너 상단에 도달하면 나머지 데이터와 함께 스크롤하는 대신 컨테이너 상단에 고정됩니다.

<div>

이 예를 복제하려면 사용자가 테이블 데이터의 열 이름을 쉽게 볼 수 있도록 스크롤할 때 헤더가 고정된 상태로 유지되는지 확인하세요.

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