솔루션

이 기능을 달성하기 위해 CSS와 JavaScript의 조합을 활용할 수 있습니다. 기법. 인기있는 솔루션은 이중 스크롤링으로 알려진 기술을 사용하는 것입니다. 여기에는 두 개의 중첩 테이블이 포함됩니다 : 테이블 본체의 고정 헤더와 스크롤 가능한 내부 테이블이 포함 된 외부 테이블. 테이블의 경우 :

/ * 외부 테이블 (고정 헤더) */ #외부 테이블 { 너비 : 100%; 높이 : 100px; / * 헤더의 고정 높이 설정 */ 오버플로 : 숨겨진; } / * 내부 테이블 (스크롤 가능한 바디) */ #내부 테이블 { 높이 : calc (100% -100px); / * 외부 테이블의 높이에 따라 높이를 계산하십시오 */ 오버플로-스크롤; }

javaScript 설정

다음, 다음, javaScript를 사용하여 내부 테이블의 높이를 동적으로 조정하십시오 :

const autertable = document.getElementById ( 'outer-table '); const innertable = document.getElementById ( 'Inner-table'); // 외부 테이블의 높이에 따라 내부 테이블의 높이를 계산합니다. innertable.style.height =`$ {outertable.clientHeight -100} px`;

/* 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;
}

예

다음 코드 샘플을 참조하십시오. &&) 이러한 기술을 구현하면 특정 요구 사항을 충족하는 반응 형 및 대화식 테이블을 만들 수 있습니다.