How Can I Create Dual Horizontal Scrollbars for Large Tables Using Only HTML, CSS, and JavaScript?

Dual Horizontal Scrollbars for Mammoth Tables

To accommodate vast tables, enabling horizontal scrolling at both the top and bottom can enhance user accessibility. Fortunately, this is achievable solely with HTML and CSS. Here's how:

Simulating an Upper Scrollbar

Create a "dummy" div above the table with horizontal scrolling. Set its height just enough to accommodate a scrollbar. This dummy element will simulate the appearance of an additional scrollbar on top.

Synchronizing Scroll Events

Attach scroll event handlers to both the dummy div and the actual table. When either scrollbar is moved, the other element should move in sync. This creates the illusion of having two independent horizontal scrollbars.

Code Snippet

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </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());
  });
});

With this code, you can provide your users with dual horizontal scrollbars, making it easier to navigate wide tables even on extended pages.

The above is the detailed content of How Can I Create Dual Horizontal Scrollbars for Large Tables Using Only HTML, CSS, and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!