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 중국어 웹사이트의 기타 관련 기사를 참조하세요!