수평 및 수직 스크롤 막대가 모두 있는 고정 헤더 테이블을 구현하는 방법은 무엇입니까?

가로 스크롤 막대와 세로 스크롤 막대가 켜져 있는 고정 헤더 테이블

고정 헤더 테이블에 세로 스크롤 막대를 추가할 때 직면한 문제가 발생합니다. 헤더 테이블. 세로 스크롤 막대는 가로 스크롤 막대의 위치 지정을 방해합니다. 둘 다 외부 컨테이너 내의 공간을 두고 충돌하기 때문입니다.

HTML 및 CSS 구조

제공된 HTML 및 CSS 구조는 좋은 출발점이다. HTML은 헤더 테이블이 고정 위치로 설정되고 본문 테이블이 Overflow-y: 스크롤로 설정된 중첩된 테이블 구조로 구성됩니다. CSS는 머리글 셀과 본문 셀의 고정 높이와 너비를 포함하여 표 요소의 스타일을 정의합니다.

해결책

문제를 해결하려면 가로 및 세로 셀이 모두 필요합니다. 수직 스크롤바가 제대로 작동하려면 CSS와 JavaScript:

1. CSS:

   • overflow-x 제거: 스크롤; .inner-container의 속성입니다.
   • 특정 너비를 가진 클래스를 .inner-container에 추가합니다(예: "scroll-container").

2. JavaScript:

   • 사용 .scroll-container의 너비를 계산하고 .table-body의 너비를 해당 너비로 설정하는 JavaScript입니다. 이렇게 하면 본문 테이블의 너비가 헤더 테이블과 일치하여 가로 스크롤 막대 문제가 방지됩니다.

예제 코드

업데이트된 예는 다음과 같습니다. 코드:

/* CSS */
.scroll-container {
  width: 100%;
}

/* JavaScript */
var scrollContainer = document.querySelector(".scroll-container");
var tableBody = document.querySelector(".table-body");
tableBody.style.width = scrollContainer.offsetWidth + "px";

설명

.inner-container에서 Overflow-x 속성을 제거하고 JavaScript를 통해 특정 너비를 설정함으로써 다음을 보장합니다. .table-body에는 가로 및 세로 스크롤을 모두 수용할 수 있는 올바른 너비가 있습니다. 이렇게 정렬하면 세로 스크롤 막대가 가로 스크롤 막대를 방해하는 것을 방지하고 둘 다 제대로 작동할 수 있습니다.

대체 솔루션

추가로 고려할 수 있는 다른 솔루션도 있습니다.

• 보다 유연하고 반응성이 뛰어난 레이아웃을 얻으려면 레이아웃에 CSS Grid 또는 Flexbox를 사용하세요.
• 이 기능 구현을 단순화할 수 있는 사전 구축된 구성 요소와 스타일을 제공하는 Bootstrap 또는 Materialize와 같은 CSS 라이브러리를 사용해 보세요.

위 내용은 수평 및 수직 스크롤 막대가 모두 있는 고정 헤더 테이블을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!