스크롤하는 동안 HTML 테이블 헤더를 고정된 상태로 유지하려면 어떻게 해야 합니까?

스크롤할 때 HTML 테이블 헤더를 고정할 수 있습니까?

HTML 테이블은 테이블 형식 데이터를 표시하는 좋은 방법입니다. 그러나 테이블이 길면 열 머리글을 추적하기 어려울 수 있습니다. 표가 넓고 머리글이 화면에 표시되지 않는 경우 특히 그렇습니다.

이 문제를 해결하는 한 가지 방법은 열 머리글을 고정하여 테이블을 스크롤할 때에도 계속 표시되도록 하는 것입니다. 이는 다양한 CSS 및 JavaScript 기술을 사용하여 달성할 수 있습니다.

CSS 변환

최신 브라우저에만 관심이 있다면 CSS 변환을 사용하여 고정 헤더를 훨씬 쉽게 얻을 수 있습니다. 작동 방식은 다음과 같습니다.

1. 테이블 래퍼에 이벤트 리스너를 추가합니다. 이 리스너는 테이블이 스크롤될 때 트리거됩니다.
2. Get 래퍼의 scrollTop 값. 이 값은 테이블이 스크롤된 픽셀 수를 나타냅니다.
3. 테이블 헤더에 번역 변환을 적용합니다. 이 변환은 테이블이 스크롤된 픽셀 수만큼 헤더를 위로 이동합니다.

이 기술에 대한 JavaScript 코드는 다음과 같습니다.

document.getElementById("wrap").addEventListener("scroll", function() {
   var translate = "translate(0," + this.scrollTop + "px)";
   this.querySelector("thead").style.transform = translate;
});

다음은 전체 예제입니다. 참조:

<div>

#wrap {
    width: 100%;
    height: 400px;
    overflow: auto;
}

th {
    width: 200px;
}

td {
    width: 200px;
    height: 100px;
    background-color: lightgray;
}

위 내용은 스크롤하는 동안 HTML 테이블 헤더를 고정된 상태로 유지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!