HTML 테이블은 테이블 형식 데이터를 표시하는 좋은 방법입니다. 그러나 테이블이 길면 열 머리글을 추적하기 어려울 수 있습니다. 표가 넓고 머리글이 화면에 표시되지 않는 경우 특히 그렇습니다.
이 문제를 해결하는 한 가지 방법은 열 머리글을 고정하여 테이블을 스크롤할 때에도 계속 표시되도록 하는 것입니다. 이는 다양한 CSS 및 JavaScript 기술을 사용하여 달성할 수 있습니다.
최신 브라우저에만 관심이 있다면 CSS 변환을 사용하여 고정 헤더를 훨씬 쉽게 얻을 수 있습니다. 작동 방식은 다음과 같습니다.
이 기술에 대한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!