CSS 변환을 사용하여 고정 헤더가 있는 HTML 테이블을 만드는 방법은 무엇입니까?

고정 헤더가 있는 HTML 테이블

문제 설명

열 헤더가 화면에 고정된 HTML 테이블을 만듭니다. 테이블의 내용을 스크롤할 때 이는 Microsoft Excel의 "창 고정" 기능과 유사합니다.

최신 브라우저 솔루션

CSS 변환을 사용하면 최신 브라우저에서 헤더 수정이 간단합니다.

1. 테이블의 "thead"에 대한 "transform" 속성을 설정합니다. element.
2. 현재 scrollTop 값으로 번역합니다.
3. 포함 요소("#wrap")에서 "scroll" 이벤트를 수신합니다.

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

지원 및 예

CSS 변환은 Internet Explorer를 제외하고 널리 지원됩니다. 8-.

전체 예는 다음과 같습니다.

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

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

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

<div>

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