스크롤할 때 HTML 테이블 헤더를 계속 표시되도록 만드는 방법은 무엇입니까?

Wrapper Div를 사용하여 HTML 테이블에 스크롤 막대 표시

HTML 테이블을 생성할 때 스크롤 막대를 표시해야 할 수 있습니다. 테이블 크기가 컨테이너를 초과하는 경우에도 테이블의 내용을 볼 수 있습니다.

이를 달성하려면 테이블을 감싸세요. 비정적으로 위치된 <div> 요소에 Overflow:auto CSS 속성을 할당합니다. 이렇게 하면 표 내용을 위한 스크롤 가능 영역이 생성됩니다.

스크롤하는 동안 표 헤더( 섹션에 있음)가 계속 보이도록 하려면 헤더를 절대적으로 배치하고 스크롤 영역 위에 배치하세요. 이렇게 하면 스크롤 가능한 콘텐츠로 인해 헤더가 숨겨지는 것을 방지할 수 있습니다.

다음은 스크롤 막대와 고정 헤더를 모두 통합한 예입니다.

CSS:

#table-wrapper {
  position: relative;
}
#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}
#table-wrapper table {
  width: 100%;
}
#table-wrapper table * {
  background: yellow;
  color: black;
}
#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

HTML:

<div>

이 기술을 적용하면 가시성을 유지하면서 스크롤이 가능한 HTML 테이블을 만들 수 있습니다. 헤더는 사용자가 제공한 예시와 같습니다.

위 내용은 스크롤할 때 HTML 테이블 헤더를 계속 표시되도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!