테이블 외부의 테이블 제목에 `position:sticky`를 사용할 수 있나요?

고정 테이블 제목

상위 요소 내에서 요소를 고정하는 기능이 Webkit에 도입되었습니다. JavaScript 및 절대 위치 지정을 사용하여 테이블 자체 내 테이블 제목에 대한 고정 동작을 달성할 수 있지만 고정 위치 지정이 더 간단한 솔루션을 제공할 수 있는지 고려해 볼 가치가 있습니다.

위치: 외부 테이블 제목에 대한 고정 작업을 수행합니다. 테이블?

예, 고정 위치 지정을 사용하여 테이블 외부에 테이블 제목을 고정시키는 것이 가능합니다. 다음 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>
    <!-- Table body content -->
  </tbody>
</table></code>

제한 사항 및 호환성

고정 위치 지정은 최신 브라우저의 표 제목에 작동하지만 호환성은 기기마다 다를 수 있다는 점에 유의하는 것이 중요합니다. 그리고 브라우저. caniuse.com에 따르면 2018년 3월 현재 고정 위치 지정에 대한 지원은 일반적으로 최신 브라우저 전반에 걸쳐 양호합니다. https://caniuse.com/#feat=css-sticky

위 내용은 테이블 외부의 테이블 제목에 `position:sticky`를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!