CSS를 사용하여 고정 헤더가 있는 스크롤 가능한 테이블 본문을 만드는 방법은 무엇입니까?

고정 헤더가 있는 스크롤 가능한 테이블 본문 만들기

큰 테이블을 작업할 때 본문이 고정되도록 하면서 헤더를 수정해야 하는 경우가 종종 있습니다. 스크롤 가능해야 합니다. 이 방법으로 사용자는 열 제목을 놓치지 않고 데이터를 쉽게 탐색할 수 있습니다.

CSS 위치 사용: 고정

Chrome, Firefox 및 간단한 CSS 솔루션인 Edge는 원하는 동작을 제공할 수 있습니다. 위치 적용: 끈적임; 상단: 0; 번째 요소까지 헤더를 테이블 상단에 고정하고 tbody를 독립적으로 스크롤할 수 있습니다.

.tableFixHead {
  overflow: auto;
  height: 100px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

추가 CSS

To 테이블의 모양과 기능을 향상하고 필요에 따라 추가 CSS를 포함합니다. 예:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px 16px;
}

th {
  background: #eee;
}

HTML 구조

"tableFixHead" 클래스가 있는 div 내에서 thead 및 tbody 요소가 있는 테이블을 추가합니다.

<div>

위 내용은 CSS를 사용하여 고정 헤더가 있는 스크롤 가능한 테이블 본문을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!