Can I Add Duplicate Horizontal Scrollbars (Top and Bottom) to a Table Using Only HTML and CSS?

How to Add a Horizontal Scrollbar on Top and Bottom of Table

In scenarios where a table extends beyond the confines of the screen, it becomes essential to incorporate a horizontal scrollbar to navigate its contents conveniently. However, a common requirement arises where users prefer to have this scrollbar both at the top and bottom of the table for seamless scrolling. Is it possible to achieve this solely through HTML and CSS?

The answer is yes. To simulate a dual horizontal scrollbar, a "dummy" div is placed above the actual table element, with a height just sufficient to accommodate a scrollbar. Event handlers are then attached to both the dummy div and the table, ensuring that scrolling either scrollbar synchronizes the other element.

For a practical demonstration, refer to the following example:

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

This technique effectively creates the illusion of a second horizontal scrollbar, providing a convenient and intuitive scrolling experience at both the top and bottom of the table.

The above is the detailed content of Can I Add Duplicate Horizontal Scrollbars (Top and Bottom) to a Table Using Only HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!