본문을 스크롤하는 동안 HTML 테이블 헤더를 계속 표시하는 방법은 무엇입니까?

html 테이블에 스크롤 막대를 표시하는 방법

HTML 테이블을 생성할 때 테이블의 내용이 스크롤되는 동안에도 헤더를 계속 표시해야 하는 경우가 있습니다.

이를 달성하려면 Overflow:auto CSS 속성이 있는 비정적으로 배치된 div에 테이블을 래핑합니다. 그런 다음 아래와 같이 테이블 헤드에 요소를 절대적으로 배치합니다.

#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;
}

<div>

이렇게 하면 제공된 URL의 방법 2와 유사하게 고정 헤더와 스크롤 본문이 있는 테이블이 생성됩니다.

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