고정 헤더와 첫 번째 열이 있는 스크롤 가능한 HTML 테이블을 만드는 방법은 무엇입니까?

고정 헤더와 첫 번째 열이 있는 스크롤 가능한 HTML 테이블 생성

고정된 열 헤더와 첫 번째 열이 있는 HTML 테이블을 어떻게 생성합니까? 테이블 내용을 스크롤하는 동안 계속 표시됩니까?

답변:

이 효과를 얻으려면 CSS와 JavaScript를 조합하여 활용할 수 있습니다. 방법은 다음과 같습니다.

1. HTML 테이블 만들기:

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1 Header</th>
      <th>Column 2 Header</th>
      <th>Column 3 Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <!-- more table rows -->
  </tbody>
</table></code>

2. 고정 헤더 및 첫 번째 열용 CSS:

<code class="css">table {
  width: 100%;
  overflow: scroll;
}

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

table tr td:first-child {
  position: sticky;
  left: 0;
}</code>

이 CSS는 스크롤할 때 테이블 헤더가 화면 상단에 고정되고 첫 번째 열이 왼쪽에 고정되도록 합니다.

3. 향상된 예:

고급 CSS 그리드를 사용하면 응답성과 화면 판독기에 대한 더 나은 지원으로 유사한 효과를 얻을 수도 있습니다.

<code class="css">table {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto 1fr;
}

table thead {
  grid-row: 1;
  grid-column: 1 / -1;
}

table tr {
  grid-column: 1 / -1;
}

table tr td:first-child {
  grid-column: 1;
}

table tbody {
  overflow: scroll;
}</code>

참고: 제공된 예는 특정 테이블 디자인 및 브라우저 호환성 요구 사항에 따라 일부 조정이 필요할 수 있습니다.

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