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

CSS를 사용하여 고정 헤더가 있는 스크롤 가능한 테이블 만들기

과다한 데이터로 인해 스크롤이 필요한 테이블을 만들 때 유용할 수 있습니다. 데이터 행이 독립적으로 스크롤되는 동안 테이블 헤더는 고정됩니다. 이 기사에서는 CSS를 사용하여 이를 달성하기 위한 자세한 솔루션을 제공합니다.

해결책

고정 헤더가 있는 스크롤 가능한 테이블을 생성하려면 헤더 요소를 그리고 태그. 그런 다음 CSS 스타일을 적용하여 표시 및 스크롤 동작을 제어할 수 있습니다.

CSS 스타일:

table tbody, table thead {
  display: block;
}

table tbody {
  overflow: auto;
  height: 100px;
}

th {
  width: 72px;
}

td {
  width: 72px;
}

그리고 헤더와 본문 요소를 분리하여 독립적으로 동작할 수 있도록 합니다. 오버플로: 의 자동 및 높이 데이터 행에 대한 스크롤을 활성화합니다. 정적 너비는 및 정렬되도록 하세요.

참고: 태그는 헤더와 데이터 행 모두에 사용됩니다.

열 너비에 대한 향상된 제어:

열 너비가 다양한 테이블의 경우 CSS를 사용하여 최소 및 최대 너비를 지정하세요. :

table th:nth-child(1), td:nth-child(1) { min-width: 50px;  max-width: 50px; }
table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }

이 기술은 헤더와 데이터 간의 정렬을 유지하면서 열 너비를 세부적으로 제어할 수 있습니다. 행.

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