스크롤 가능한 Div 내에서 고정 헤더 테이블을 만드는 방법은 무엇입니까?

스크롤 가능한 Div 내에 고정 헤더 테이블을 생성하는 방법

일반적인 웹 개발 과제는 사용자가 세로로 스크롤할 때에도 계속 표시되는 고정 헤더가 있는 테이블을 생성하는 것입니다. 테이블의 몸체를 통해. 이 기사에서는 사용자 정의 CSS 솔루션과 JavaScript 기반 솔루션이라는 두 가지 접근 방식을 사용하여 이 문제에 대한 솔루션을 살펴보겠습니다.

사용자 정의 CSS 솔루션

사용자 정의 CSS 솔루션은 테이블 헤더의 위치를 ​​절대적으로 지정하고 테이블 본문이 스크롤되는 동안에도 해당 위치를 유지하는 데 의존합니다. 다음 CSS를 사용할 수 있습니다.

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 250px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table thead th {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

이 방법은 단순히 표 본문 위에 헤더를 배치하고 스크롤하는 동안 상단 위치를 유지합니다.

JavaScript 솔루션

대체 접근 방식은 JavaScript를 활용하여 헤더를 수정하고 스크롤 동작을 처리하는 것입니다. 다음 코드 스니펫은 이 접근 방식을 보여줍니다.

// Get the table and its header
var table = document.getElementById("table");
var header = table.querySelector("thead");

// Clone the header
var cloneHeader = header.cloneNode(true);

// Create a wrapper div for the cloned header
var headerWrapper = document.createElement("div");
headerWrapper.classList.add("header-wrapper");

// Insert the cloned header into the wrapper
headerWrapper.appendChild(cloneHeader);

// Insert the header wrapper into the table
table.insertBefore(headerWrapper, table.firstChild);

// Add event listener for scrolling
table.addEventListener("scroll", function() {
  headerWrapper.style.left = table.scrollLeft + "px";
});

이 JavaScript 메소드는 헤더를 복제하여 테이블 상단에 고정한 다음 테이블이 스크롤될 때 왼쪽 위치를 업데이트하여 테이블 본문과의 정렬을 유지합니다. .

두 솔루션 모두 스크롤 가능한 div 내에서 고정 헤더 테이블을 생성하는 문제를 효과적으로 해결합니다. 접근 방식의 선택은 웹 프로젝트의 특정 요구 사항과 선호도에 따라 다릅니다.

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