CSS 및 고정 헤더를 사용하여 스크롤 가능한 테이블을 만드는 방법

웹 개발에서는 많은 양의 데이터가 포함된 테이블을 생성해야 하는 경우가 많습니다. 스크롤이 필요합니다. 그러나 테이블 본문을 스크롤하는 동안 고정된 헤더를 유지하는 것은 어려울 수 있습니다. 이 효과를 얻을 수 있는 방법은 다음과 같습니다.

HTML 구조

먼저 HTML 구조가 올바른지 확인해야 합니다. 스크롤 막대가 있는 외부 div, 테이블을 포함하는 내부 div가 있고 테이블 헤더는 요소 내에 있어야 하고 테이블 데이터는

 
CSS 스타일
이제 CSS를 사용하여 테이블 스타일을 지정해야 합니다.
/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}
추가 고려 사항
올바른 정렬을 위해 모든 헤더와 데이터 셀이 
 요소에 포함되어 있는지 확인하세요. 다양한 열 너비를 원하는 경우 CSS의 n번째 하위 선택기를 사용하세요.
참고: 이 접근 방식은 작은 테이블에 적합합니다. 매우 큰 테이블의 경우 가상화나 타사 라이브러리와 같은 다른 기술을 사용하는 것이 좋습니다.