CSS 및 JavaScript를 사용하여 HTML에서 본문을 스크롤하는 동안 테이블 헤더를 고정된 상태로 유지하는 방법은 무엇입니까?

열 헤더가 화면에 고정되어 있고 표 본문과 함께 스크롤되지 않도록 긴 HTML 표를 표시하는 크로스 브라우저 CSS/JavaScript 기술이 있습니까?

Microsoft Excel에서는 표 내용을 스크롤하는 동안 열 머리글을 안정적으로 유지하기 위해 "창 고정" 기능을 자주 사용합니다. HTML에도 비슷한 크로스 브라우저 기술이 있나요?

CSS 변환을 사용하면 단 4줄의 JavaScript 코드로 이 작업을 수행할 수 있습니다.

1. 테이블을 다음과 같은 컨테이너로 감싸세요. ID는 "wrap"이고 오버플로 속성은 "auto"로 설정합니다.
2. 컨테이너.
3. 이벤트 핸들러 내에서 scrollTop 속성을 기반으로 번역 값을 계산합니다.
4. transform 속성을 사용하여 계산된 번역 값을 테이블의 thead 요소에 적용합니다.

이 접근 방식에는 다음과 같은 장점이 있습니다.

• 4줄만 사용하여 깔끔하고 효율적입니다. JavaScript.
• 외부 JavaScript 종속성이 없습니다.
• 고정 레이아웃을 포함한 모든 테이블 구성에서 작동합니다.
• Chrome, Safari, Firefox, Edge를 포함한 최신 브라우저를 지원합니다.

코드는 다음과 같습니다.

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

아래는 전체 코드입니다. 참고 예시:

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

// CSS
#wrap {
    overflow: auto;
    height: 400px;
}

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

// HTML
<div></div>

위 내용은 CSS 및 JavaScript를 사용하여 HTML에서 본문을 스크롤하는 동안 테이블 헤더를 고정된 상태로 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!