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

스크롤 가능한 HTML 테이블에 헤더를 고정하는 방법

고정 테이블 헤더와 스크롤 가능한 테이블 본문을 모두 통합하는 것은 웹 애플리케이션의 일반적인 요구 사항일 수 있습니다. . 그러나 효과적인 솔루션을 찾는 것은 어려울 수 있습니다. 이 가이드에서는 이 문제에 대한 솔루션을 탐색하고 구현 과정을 안내합니다.

솔루션

이 기능을 구현하려면 CSS와 JavaScript의 조합을 활용할 수 있습니다. 기법. 널리 사용되는 솔루션은 이중 스크롤이라는 기술을 사용하는 것입니다. 여기에는 두 개의 중첩 테이블, 즉 고정 헤더가 포함된 외부 테이블과 테이블 본문에 대한 스크롤 가능한 내부 테이블을 만드는 작업이 포함됩니다.

CSS 설정

먼저 CSS 스타일을 정의합니다. 테이블의 경우:

/* Outer table (fixed header) */
#outer-table {
  width: 100%;
  height: 100px; /* Set a fixed height for the header */
  overflow: hidden;
}

/* Inner table (scrollable body) */
#inner-table {
  height: calc(100% - 100px); /* Calculate the height based on the outer table's height */
  overflow-y: scroll;
}

JavaScript 설정

다음으로 JavaScript를 사용하여 내부 테이블의 높이를 동적으로 조정합니다.

const outerTable = document.getElementById('outer-table');
const innerTable = document.getElementById('inner-table');

// Calculate the inner table's height based on the outer table's height
innerTable.style.height = `${outerTable.clientHeight - 100}px`;

예

실제 예제는 다음을 참조하세요. 다음 코드 샘플을 참조하세요.

이 솔루션은 테이블 헤더를 효과적으로 고정하는 동시에 다음을 허용합니다. 테이블 본체가 원활하게 스크롤됩니다. 이러한 기술을 구현하면 특정 요구 사항을 충족하는 반응형 및 대화형 테이블을 만들 수 있습니다.

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