스크롤하는 Div 내에서 고정 테이블 헤더를 어떻게 만들 수 있나요?

테이블이 있는 스크롤 요소 내 고정 위치 지정

최근 도입된 CSS 속성 위치: 고정을 사용하면 요소가 상위 컨테이너 내에서 고정된 상태로 유지됩니다. 스크롤하는 동안. 그러나 테이블이 포함된 스크롤링 div 내에서 해당 기능에 대한 질문이 있습니다.

현재 상황

처음에는 position:sticky만 가능하다고 생각했습니다. 상위 요소 내에서 작업합니다. 그러나 이 속성을 사용하여 스크롤 div 내에서 고정 테이블 헤더를 생성할 수 있다는 것이 발견되었습니다.

해결책

이를 달성하려면 다음을 추가하기만 하면 됩니다. 스타일시트에 다음 줄을 추가하세요.

<code class="css">thead th { position: sticky; top: 0; }</code>

및 <일> 이 스타일이 작동하려면 요소가 필요합니다.

여러 헤더 행

테이블의 에 여러 행이 있는 경우 첫 번째 행을 고정할 수 있습니다. 다음 코드를 사용하세요.

<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>

브라우저 지원

2018년 3월 현재 position:sticky 지원은 최신 브라우저 전반에 걸쳐 널리 퍼져 있습니다. https://caniuse.com/#feat=css-sticky에서 최신 호환성 정보를 확인할 수 있습니다.

크레딧

이 발견에 대한 크레딧은 @에게 있습니다. 2017년 12월 이 기술을 공유한 ctf0님.

위 내용은 스크롤하는 Div 내에서 고정 테이블 헤더를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!