How to Implement Dual Horizontal Scrollbars for Large Tables?

Dual Horizontal Scrollbars for Large Tables

Problem:

Encountering a large table on the page, the user seeks to implement both top and bottom horizontal scrollbars to facilitate navigation.

Implementation using HTML and CSS:

To achieve the desired functionality, a creative approach is employed. A "dummy" div is positioned above the table, rendered sufficiently tall to accommodate a scrollbar. Both the dummy div and the table are assigned horizontal scrolling capabilities.

Code Breakdown:

HTML:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </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="js">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

Function:

• The dummy div (.div1) simulates a top scrollbar and acts as an invisible placeholder.
• The actual table (.div2) contains the table content and has horizontal scrolling enabled.
• JavaScript event handlers ensure that when either scrollbar is moved, the other scrollbar moves in sync.

Live Example:

For a live demonstration, refer to the provided fiddle.

The above is the detailed content of How to Implement Dual Horizontal Scrollbars for Large Tables?. For more information, please follow other related articles on the PHP Chinese website!