HTML과 CSS를 사용하여 테이블 상단과 하단 모두에 가로 스크롤 막대를 가질 수 있습니까?

상단과 하단의 가로 스크롤바

질문:

가능한가요? HTML과 CSS만 사용하여 큰 테이블의 상단과 하단에 가로 스크롤 막대가 있습니까?

답변:

예, 상단에 두 번째 가로 스크롤 막대를 시뮬레이션할 수 있습니다.

구현:

가로 스크롤 기능이 있는 테이블 위에 "더미" div를 만듭니다. 이 div는 스크롤 막대가 들어갈 만큼 충분히 커야 합니다.

더미 div와 실제 테이블 모두의 스크롤 이벤트에 이벤트 핸들러를 연결합니다. 이렇게 하면 두 스크롤 막대 중 하나를 이동할 때 두 스크롤 막대의 스크롤이 동기화됩니다.

코드 샘플:

HTML:

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

CSS:

<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>

JavaScript:

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

라이브 예시:

효과를 설명하려면 [실시간 예제](여기에 바이올린 링크)를 참조하세요.

위 내용은 HTML과 CSS를 사용하여 테이블 상단과 하단 모두에 가로 스크롤 막대를 가질 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!