`위치: 고정;`을 사용하여 고정 테이블 헤더를 만드는 방법은 무엇입니까?

위치가 있는 고정 테이블 헤더: 고정

위치: 고정; 속성은 최근 Webkit에 구현되어 페이지가 스크롤될 때 상위 컨테이너 내에 고정된 상태로 유지되는 요소를 생성하는 편리한 방법을 제공합니다. 이 기능은 처음에는 직접 상위 요소 내에서만 작동했지만 이제는 테이블 내 스크롤을 지원합니다.

질문:

위치 사용 방법: 고정; div 컨테이너 내에서 스크롤할 때 테이블 헤더를 수정하는 속성이 있습니까?

답변:

2018년에는 광고에 고정된 위치가 쉽게 작동합니다! 다음 CSS 규칙을 추가하기만 하면 됩니다.

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

고정 헤더를 사용하려면 테이블에 thead와 번째 요소가 포함되어야 합니다.

<code class="html"><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 ></code>

thead에 여러 행이 포함된 경우 다음을 지정할 수 있습니다. 첫 번째 행의 고정 동작:

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

2018년 3월 현재 대부분의 최신 브라우저에서 고정 헤더가 지원됩니다. 최신 브라우저 호환성 정보는 https://caniuse.com/#feat=css-sticky를 참조하세요.

이 솔루션에 대한 크레딧은 2017년 12월 3일 댓글에서 공유한 @ctf0에게 돌아갑니다.

위 내용은 `위치: 고정;`을 사용하여 고정 테이블 헤더를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!