CSS를 사용하여 고정 헤더, 스크롤 가능한 본문 테이블을 만드는 방법은 무엇입니까?

스크롤 가능한 본문이 있는 고정 헤더 테이블을 만드는 방법

대규모 데이터세트로 작업할 때 고정된 헤더와 스크롤 가능한 본문이 있는 테이블을 표시해야 하는 경우가 많습니다. . 이를 통해 사용자는 열 헤더를 추적하지 않고도 테이블을 쉽게 탐색할 수 있습니다.

안타깝게도 이 문제에 대한 가장 간단한 해결책은 Bootstrap에서 작동하지 않거나 스타일 지정을 방해하는 것입니다.

고정 테이블 헤드 - CSS 전용

Chrome, Firefox 및 Edge의 경우 다음 CSS를 사용하여 열 머리글은 테이블 상단에 고정됩니다.

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table border="1">
    <thead>
      <tr>
<th>TH 1</th>
<th>TH 2</th>
</tr>
    </thead>
    <tbody>
      <tr>
<td>A1</td>
<td>A2</td>
</tr>
      <tr>
<td>B1</td>
<td>B2</td>
</tr>
      <tr>
<td>C1</td>
<td>C2</td>
</tr>
      <tr>
<td>D1</td>
<td>D2</td>
</tr>
      <tr>
<td>E1</td>
<td>E2</td>
</tr>
    </tbody>
  </table>
</div>

위 내용은 CSS를 사용하여 고정 헤더, 스크롤 가능한 본문 테이블을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!