고정 헤더와 스크롤 가능한 본문이 있는 Bootstrap 3 테이블을 만드는 방법은 무엇입니까?

스크롤 가능한 콘텐츠로 테이블 고정 헤더 구현

이 글에서는 고정된 헤더와 스크롤 가능한 테이블을 생성하는 문제에 대해 설명합니다. Bootstrap을 사용하는 본체 3. 탐구된 솔루션은 타협하지 않고 Bootstrap 미학을 보존하는 것을 목표로 합니다. 기능.

도전

제공된 예에서 볼 수 있듯이 기존 Bootstrap 테이블은 테이블 본체 높이 설정에 문제가 있습니다. 높이를 10px로 설정해도 결과는 변경되지 않습니다. 이 문제에는 대체 접근 방식이 필요합니다.

고정 위치 지정이 포함된 고정 헤더

간단하면서도 효과적인 솔루션은 CSS 고정 위치 지정을 활용하는 것입니다. 이 접근 방식에는 위치 할당이 포함됩니다: 고정; 상단: 0; 테이블 헤더(th) 요소에 추가하여 테이블 상단에 고정된 상태로 유지되도록 합니다. 구현에 대한 자세한 내용은 다음과 같습니다.

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

위 코드에서 tableFixHead 클래스를 사용하여 컨테이너를 생성합니다. 여기에는 Overflow: auto; 테이블을 스크롤 가능하게 만들고 높이를 100px로 설정하여 보이는 부분을 정의합니다. 테이블 헤더 요소에는 position:sticky;가 할당됩니다. 상단: 0; 스크롤 가능한 영역의 상단에 고정되도록 합니다.

이 접근 방식은 Chrome, Firefox, Edge와 같은 최신 브라우저에서 효과적으로 작동합니다.

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