HTML, CSS 및 JavaScript를 사용하여 테이블에 대한 이중 가로 스크롤 막대(상단 및 하단)를 만드는 방법은 무엇입니까?

테이블 상단과 하단 모두에 가로 스크롤 막대 만들기

큰 테이블이 보이는 브라우저 창 너머로 확장되는 경우 스크롤 막대를 갖는 것이 바람직한 경우가 많습니다. 전체 표 콘텐츠를 효율적으로 탐색하기 위해 상단과 하단 모두에 있습니다.

순수한 HTML 및 CSS에서는 상단의 두 번째 수평 스크롤바. 방법은 다음과 같습니다.

1. 더미 Div 만들기:

   테이블 위에 div 요소를 추가하고 모양을 만들기에 충분한 높이로 스타일을 지정합니다. 스크롤바(예: 20px).

2. 세로 스크롤 비활성화:

   스크롤을 제한하려면 더미 div와 테이블의 상위 div 모두에 대해overflow-y:hidden 설정 수평으로 axis.

3. 가로 스크롤 활성화:

   overflow-x 설정: 더미 div 및 테이블의 상위 div를 스크롤하여 가로 스크롤을 활성화합니다. 두 영역 모두.

4. 동기화 스크롤 막대:

   스크롤 이벤트에 이벤트 리스너를 연결하여 JavaScript를 활용하여 더미 div와 테이블의 스크롤을 동기화합니다. 하나의 스크롤 막대가 이동되면 다른 스크롤 막대도 그에 따라 조정됩니다.

다음은 테이블의 상위 항목 위에 더미 div를 놓는 예입니다. div:

HTML:

<div class="table-wrapper">
  <div class="dummy-scrollbar"></div>
  <div class="data-table">
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.table-wrapper {
  height: 130%;
  overflow: auto;
  width: 100%;
}

.dummy-scrollbar {
  height: 20px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.data-table {
  overflow-x: scroll;
  overflow-y: visible;
  width: 100%;
}

JavaScript:

$(".table-wrapper").scroll(function() {
  $(".dummy-scrollbar").scrollLeft($(this).scrollLeft());
});

$(".dummy-scrollbar").scroll(function() {
  $(".table-wrapper").scrollLeft($(this).scrollLeft());
});

이를 구현함으로써 접근 방식을 사용하면 테이블 위에 두 번째 수평 스크롤바가 있는 듯한 느낌을 주어 탐색 및 접근성을 향상시킬 수 있습니다.