테이블 헤더의 스크롤링 Div 내에서 고정 헤더를 사용할 수 있나요?

스크롤링 Div 내의 고정 헤더

위치: 고정; 속성은 Webkit에서 인기를 얻었으며 스크롤하는 동안 요소가 상위 컨테이너 내에 고정된 상태로 유지될 수 있게 되었습니다. 그러나 일부 개발자는 이 기능을 테이블이 포함된 스크롤 div 요소로 확장해야 한다고 밝혔습니다.

스크롤 div 내의 테이블 헤더에 고정 위치 지정을 적용할 수 있나요?

정답:

사실 직위: 끈끈함; 이제 에 사용할 수 있습니다. 요소 2018년 기준!

구현:

CSS 스타일시트에 다음 줄을 추가하기만 하면 됩니다.

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

전제 조건:

• 테이블에 및 <일> 요소.

테이블 마크업 예:

<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>
      // body code
    </tbody>
</table></code>

추가 옵션:

• 수정하려면 스크롤하는 동안 다음을 사용하세요.

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

브라우저 지원:

2018년 3월 현재 광고 요소의 고정 위치 지정은 최신 브라우저에서 널리 지원됩니다. , 개발자 커뮤니티의 노고에 감사드립니다.

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