헤더를 고정한 상태로 HTML 테이블에 스크롤 막대를 추가하는 방법은 무엇입니까?

HTML 테이블에 스크롤 막대 표시

HTML 테이블에 스크롤 막대를 표시하려면 다음 접근 방식을 고려하세요.

테이블을 제자리에 놓기 Div

상대 또는 절대 위치를 사용하여 div 요소 내에 테이블을 묶습니다. 이 div는 스크롤 가능 영역의 컨테이너 역할을 합니다.

Div에서 오버플로를 자동으로 설정

CSS를 적용합니다. 속성 오버플로:자동을 컨테이너 div로 설정합니다. 이는 테이블이 경계를 초과할 때 콘텐츠 오버플로를 허용합니다.

#table-container { Overflow: auto; }

테이블 헤더 위치를 절대적으로 지정

스크롤하는 동안 테이블 헤더를 고정된 상태로 유지하려면 thead 요소를 절대적으로 배치하세요.

#table-header { position : 절대; }

컨테이너 높이 설정

스크롤 가능 영역을 정의하려면 컨테이너 div의 높이를 지정하세요.

#table-container { 높이: 400px; }

구현예

<div>
<pre class="brush:php;toolbar:false">#table-container {
  height: 400px;
  overflow: auto;
}

#table-header {
  position: absolute;
}

이 접근 방식은 테이블 헤더를 상단에 고정한 상태로 스크롤바를 제공합니다.