HTML 테이블에 고정 헤더와 열을 만드는 방법은 무엇입니까?

고정 헤더와 열이 있는 HTML 테이블 생성

방대한 HTML 테이블로 작업할 때 중요한 열 헤더를 놓치면 답답할 수 있습니다. 스크롤할 때 행 데이터가 표시됩니다. 다행히도 고정된 헤더와 열을 생성하여 쉽게 탐색할 수 있는 CSS 및 JavaScript 기술이 있습니다.

고정 헤더와 고정 열을 얻는 방법:

이를 달성하려면 , 다음 접근 방식을 활용할 수 있습니다.

1. 고정 헤더 생성: 사용 테이블의 position: 끈적한 속성을 사용하여 위치에 있는 요소. 이렇게 하면 스크롤할 때 표 상단에 헤더가 계속 표시됩니다.
2. 첫 번째 열 수정: 첫 번째 열을 수정하려면
   첫 번째 열의 셀을 래핑합니다. 이

   의 위치를 ​​설정합니다. 고정하고 왼쪽 속성을 0으로 설정합니다. 이렇게 하면 열이 뷰포트의 가장 왼쪽 가장자리에 고정됩니다.

구현 예:

다음은 이를 달성하기 위한 코드 효과:

<code class="html"><style>
  thead {
    position: sticky;
    top: 0;
  }

  .fixed-column {
    position: sticky;
    left: 0;
  }
</style>

<table>
  <thead>
    <tr>
      <th class="fixed-column">ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <!-- Data rows -->
  </tbody>
</table></code>

참고: jsBin에 대한 답변에 제공된 예는 이 기술의 실제 구현을 보여줍니다. 그러나 이 접근 방식에는 제한이 있거나 특정 브라우저 호환성 요구 사항에 따라 조정이 필요할 수 있다는 점에 유의하는 것이 중요합니다.

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