How to Create Synchronized Top and Bottom Horizontal Scrollbars for a Table Using Only HTML and CSS?

How to Create a Horizontal Scrollbar on Both the Top and Bottom of a Table with Only HTML and CSS

Problem:

A user wants to add horizontal scrollbars to the top and bottom of a large table without using any JavaScript.

Solution:

It is possible to simulate a second horizontal scrollbar on top of the table by using CSS to create a "dummy" div above the table that has horizontal scrolling and a height just high enough for a scrollbar. Event handlers for the "scroll" event can then be attached to the dummy element and the actual table, synchronizing the scrolling of both elements when either scrollbar is moved.

Code Snippet:

HTML:

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

JavaScript:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

The dummy div (.div1) will appear as a second horizontal scrollbar above the actual table element (.div2). By syncing the scrolling of both elements, the user can scroll the table content from either the top or bottom scrollbar.

The above is the detailed content of How to Create Synchronized Top and Bottom Horizontal Scrollbars for a Table Using Only HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!