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

CSS에서 고정 헤더가 있는 스크롤 가능한 테이블을 만드는 방법

스크롤 가능한 본문을 유지하면서 고정 헤더가 있는 테이블을 향상시키는 것은 웹 개발의 일반적인 요구 사항입니다. 이 기사에서는 CSS를 사용하는 포괄적인 솔루션을 살펴보겠습니다.

문제

제공된 시나리오에서 스크롤 가능한 컨테이너 내의 테이블은 스크롤할 때 헤더를 유지하는 데 어려움을 겪습니다. 근본적인 문제는 헤더와 본문이 불가분하게 연결되어 함께 스크롤되는 데서 비롯됩니다.

해결책

이 문제를 해결하는 열쇠는 테이블의 헤더( )를 본문()에서 가져옵니다. 두 요소 모두에 대해 display: block을 설정하면 본질적인 연결이 끊어져 독립적으로 작동할 수 있습니다.

본문에 스크롤 기능을 도입하려면 Overflow: auto를 할당하고 원하는 높이를 지정합니다. 또한 스크롤 중에 헤더가 표류하는 것을 방지하려면 CSS를 사용하여 너비를 수정하세요.

코드 조각

table tbody, table thead {
    display: block;
}

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

th {
    width: 72px;
}

td {
    width: 72px;
}

추가 고려 사항

• HTML 누락 요소: 모든 행이 헤더 행을 포함한 요소.
• 열 너비 제어: 정렬을 유지하면서 열 너비를 세밀하게 제어하려면 다음 코드를 사용하는 것이 좋습니다.

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; }
/* ... and so on for each subsequent column */

결론

테이블의 헤더와 본문을 분리하고 앞서 언급한 CSS 속성을 구현함으로써 테이블 생성에 성공했습니다. 원래 쿼리의 요구 사항을 충족하는 고정 헤더가 있는 스크롤 가능한 테이블입니다.

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