Can a Second Horizontal Scrollbar Be Created at the Top of a Table Using Only HTML and CSS?

Mimicking a Second Horizontal Scrollbar at the Top of a Table

Problem:

Enhancing a massive table with a horizontal scrollbar at the bottom is desired. However, replicating this scrollbar at the top is also sought. Is it feasible to accomplish this purely with HTML and CSS?

Solution:

Utilizing a "dummy" div simulates a second horizontal scrollbar above an element. Positioned directly atop the primary element, this dummy div is sized sufficiently to accommodate a scrollbar. By attaching event handlers to both the dummy and primary elements, synchronization is ensured when either scrollbar is used. The dummy div replicates the appearance and functionality of a second top scrollbar.

Live Example:

Explore this fiddle for a practical demonstration.

Code:

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());
  });
});

The above is the detailed content of Can a Second Horizontal Scrollbar Be Created at the Top of a Table Using Only HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!