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

HTML 테이블에서 고정 헤더 및 고정 열 구현

웹 개발에서 스크롤이 필요할 때 큰 HTML 테이블을 표시하는 것이 어려울 수 있습니다. 필수 정보의 가시성을 유지합니다. 다행스럽게도 CSS와 JavaScript 기술을 결합하면 화면 상단의 열 헤더를 고정하고 테이블 데이터를 스크롤할 때 첫 번째 열을 고정된 상태로 유지함으로써 솔루션을 제공할 수 있습니다.

작업 예제에서는 CSS 속성 position:sticky를 사용하여 열 헤더를 제자리에 고정하는 방법을 보여줍니다. 이 속성을 top으로 설정하면 스크롤하는 동안 헤더가 화면 상단에 계속 표시됩니다.

첫 번째 열을 수정하려면 JavaScript 플러그인 "stickyTableHeaders"를 사용할 수 있습니다. 이 플러그인은 첫 번째 열 콘텐츠의 복제본을 생성하고 CSS 트릭을 사용하여 위치를 지정하여 원하는 고정 효과를 얻습니다.

이를 구현하는 방법의 예는 다음과 같습니다.

<code class="html"><table id="myTable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table data -->
  </tbody>
</table></code>

<code class="css">#myTable {
  width: 100%;
  border-collapse: collapse;
}

#myTable thead {
  position: sticky;
  top: 0;
}</code>

<code class="javascript">// Use the stickyTableHeaders plugin to fix the first column
$('#myTable').stickyTableHeaders();</code>

이러한 기술을 결합하면 고정된 헤더와 고정된 열이 있는 HTML 테이블을 생성하여 스크롤하는 동안 필수 정보가 계속 표시되도록 할 수 있습니다.

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