HTML, CSS 및 JavaScript만 사용하여 큰 테이블에 대한 이중 가로 스크롤 막대를 어떻게 만들 수 있습니까?

Mammoth 테이블을 위한 이중 가로 스크롤바

넓은 테이블을 수용하기 위해 상단과 하단 모두 가로 스크롤을 활성화하면 사용자 접근성이 향상됩니다. 다행스럽게도 이는 HTML과 CSS로만 달성할 수 있습니다. 방법은 다음과 같습니다.

상단 스크롤 막대 시뮬레이션

가로 스크롤을 사용하여 테이블 위에 "더미" div를 만듭니다. 스크롤 막대를 수용할 수 있을 만큼만 높이를 설정합니다. 이 더미 요소는 상단에 추가 스크롤 막대의 모양을 시뮬레이션합니다.

스크롤 이벤트 동기화

스크롤 이벤트 핸들러를 더미 div와 실제 테이블 모두에 연결합니다. 스크롤 막대 중 하나를 이동하면 다른 요소도 동기화되어 이동해야 합니다. 이는 두 개의 독립적인 가로 스크롤 막대를 갖는 듯한 착각을 불러일으킵니다.

코드 조각

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </div>
</div>

CSS:

.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
}
.wrapper1 { height: 20px; }
.wrapper2 { height: 200px; }
.div1 { width: 1000px; height: 20px; }
.div2 { width: 1000px; height: 200px; background-color: #88FF88; overflow: auto; }

JS:

$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

이것으로 코드를 사용하면 사용자에게 이중 가로 스크롤 막대를 제공하여 확장된 페이지에서도 넓은 테이블을 더 쉽게 탐색할 수 있습니다.

위 내용은 HTML, CSS 및 JavaScript만 사용하여 큰 테이블에 대한 이중 가로 스크롤 막대를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!