\'위치: 고정\'을 사용하여 스크롤 div 내에서 테이블 헤더를 고정할 수 있나요?

스크롤링 테이블 Divs 내의 고정 헤더

최근 Webkit에 'position:sticky'가 도입되면서 개발자들은 잠재적인 용도를 모색하고 있습니다. 발생하는 한 가지 질문은 스크롤 div 내에서 테이블의 헤더(thead)를 유지하는 데 사용할 수 있는지 여부입니다.

개념

기본적으로 '위치: 끈적끈적'은 기능을 상위 요소로 제한하므로 이 특정 시나리오에는 적합하지 않습니다. 그러나 '고정 위치 지정'을 활용하여 원하는 효과를 얻을 수 있습니다.

해결 방법

스크롤링 div 내에서 테이블 헤더를 고정하려면 다음을 수행하세요. 스타일시트에 다음 줄을 추가하세요.

thead th { position: sticky; top: 0; }

스타일링을 적용하는 데 필요한 'thead' 및 'th' 요소가 테이블에 있는지 확인하세요.

구현

<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
      // your body code
    </tbody>
</table>

'thead'에 여러 행이 있는 경우 이를 사용하여 첫 번째 행의 접착성을 유지합니다.

thead tr:first-child th { position: sticky; top: 0; }

브라우저 지원

2018년 3월 현재 'position:sticky'는 최신 브라우저 전반에 걸쳐 광범위하게 지원됩니다: https://caniuse.com/#feat=css-sticky

Credit

이 솔루션은 @ctf0이 2017년 12월 3일 댓글에서 처음 제안한 것입니다.

위 내용은 \'위치: 고정\'을 사용하여 스크롤 div 내에서 테이블 헤더를 고정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!