HTML과 CSS만 사용하여 테이블에 중복 가로 스크롤 막대(상단 및 하단)를 추가할 수 있습니까?

테이블 상단과 하단에 가로 스크롤바를 추가하는 방법

테이블이 화면 범위를 벗어나 확장되는 시나리오에서는 콘텐츠를 편리하게 탐색하려면 가로 스크롤 막대를 통합하는 것이 필수적입니다. 그러나 사용자가 원활한 스크롤을 위해 테이블 ​​상단과 하단 모두에 이 스크롤 막대를 두는 것을 선호하는 경우 공통 요구 사항이 발생합니다. HTML과 CSS를 통해서만 이를 달성할 수 있습니까?

대답은 '예'입니다. 이중 가로 스크롤 막대를 시뮬레이션하기 위해 "더미" div가 실제 테이블 요소 위에 배치되며 높이는 스크롤 막대를 수용하기에 충분합니다. 그런 다음 이벤트 핸들러가 더미 div와 테이블 모두에 연결되어 스크롤 막대 중 하나를 스크롤하면 다른 요소가 동기화됩니다.

실제 데모는 다음을 참조하세요. 예:

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </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만 사용하여 테이블에 중복 가로 스크롤 막대(상단 및 하단)를 추가할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!