HTML 및 CSS에서 표의 상단과 하단 모두에 가로 스크롤 막대를 만드는 방법은 무엇입니까?

HTML 및 CSS에서 테이블의 위쪽과 아래쪽에 가로 스크롤 막대를 배치하는 방법

가로 스크롤 막대의 필요성을 해결하려면 큰 테이블의 상단과 하단 모두 HTML과 CSS만으로는 직접적으로 불가능합니다. 그러나 두 개의 스크롤 막대가 있는 것을 시뮬레이션하는 효과적인 해결 방법이 있습니다.

테이블 위에 "더미" div를 배치하여 가로 스크롤 막대를 수용할 만큼 충분한 높이를 부여하는 것이 비결입니다. 이 더미 div는 "두 번째" 스크롤 막대 역할을 합니다.

더미 div와 실제 테이블 간의 동기화를 유지하기 위해 이벤트 핸들러가 두 요소 모두에 연결됩니다. 두 요소 중 하나의 스크롤 막대가 이동할 때마다 다른 요소도 이에 따라 업데이트되어 두 스크롤 막대가 동기화 상태를 유지합니다.

대화형 데모를 보려면 제공된 바이올린을 참조하세요.

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div></code>

<code class="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;
}</code>

<code class="javascript">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

이 기술을 사용하면 테이블 상단과 하단 모두에 가로 스크롤 막대가 있는 것처럼 효과적으로 흉내낼 수 있어 사용자가 편리하게 탐색할 수 있습니다.

위 내용은 HTML 및 CSS에서 표의 상단과 하단 모두에 가로 스크롤 막대를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!