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

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

문제:

수평 및 수직 스크롤 막대가 있는 고정 헤더 테이블은 두 스크롤 막대가 모두 필요할 때 어려울 수 있습니다. 문제는 외부 컨테이너가 절대적으로 위치할 때 발생하며, 이로 인해 세로 스크롤 막대가 헤더를 방해하여 제자리에 고정되지 않을 수 있습니다.

HTML:

HTML 구조는 상대적으로 간단함:

<div class="outer-container">
  <div class="inner-container">
    <div class="table-header">...</div>
    <div class="table-body">...</div>
  </div>
</div>

CSS:

CSS 스타일은 외부 컨테이너를 절대적으로 배치하고 넘쳐나는 콘텐츠를 처리합니다.

.outer-container {
  position: absolute;
  overflow: hidden;
}

.inner-container {
  overflow-x: scroll;
}

.table-header {
  position: absolute;
  width: 100%;
}

.table-body {
  overflow-y: scroll;
  height: calc(100% - 40px); /* Adjust this value to match the height of the header */
}

해결책:

이 문제를 해결하는 열쇠는 테이블 헤더와 본문을 동기화하여 스크롤합니다. 가능한 해결책은 다음과 같습니다.

1. .table-header의 위치를 ​​절대값으로 설정하세요. 이렇게 하면 .inner-container 내에 위치가 유지됩니다.
2. .table-body에 스크롤 이벤트 리스너를 추가합니다.
3. 이벤트 핸들러에서 .table-body의 왼쪽 오프셋을 설정합니다. .table-body의 가로 스크롤 위치의 음수에 헤더를 추가합니다. 이렇게 하면 가로로 스크롤하면서 본문과 함께 헤더도 이동합니다.

JavaScript/jQuery:

다음 스크립트를 사용하여 스크롤을 구현할 수 있습니다. 동기화:

$(".table-body").scroll(function() {
  $(".table-header").offset({ left: -this.scrollLeft });
});

설명:

이 스크립트는 사용자가 .table-body를 가로로 스크롤할 때 .table-header도 함께 스크롤되도록 합니다. 고정된 상태로 유지 position.

참고:

CSS에서 .table-body의 높이 속성을 조정하여 .table-header의 높이와 일치시킵니다. 이렇게 하면 본문이 헤더 위로 넘치는 것을 방지할 수 있습니다.

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