How Can I Create a Duplicate Horizontal Scrollbar at the Top of a Table?

Duplicate Horizontal Scrollbar at Top and Bottom of a Table

Creating a horizontal scrollbar at the bottom of a table is a common requirement for tables with excessive width. However, replicating the scrollbar at the top requires a more innovative approach.

To simulate a second horizontal scrollbar at the top, the solution involves creating a "dummy" div above the original table. This dummy div has a horizontal scrollbar and is sized precisely to mimic the width of the original scrollbar.

Next, event handlers are attached to both the dummy div and the original table to synchronize their scrolling behavior. Whenever one of the scrollbars is moved, the other is updated to maintain alignment. The effect is a second horizontal scrollbar at the top of the table.

The following code illustrates this technique:

HTML:

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

By incorporating this technique, developers can effectively create a duplicate horizontal scrollbar at the top of a table using purely HTML, CSS, and JavaScript.

The above is the detailed content of How Can I Create a Duplicate Horizontal Scrollbar at the Top of a Table?. For more information, please follow other related articles on the PHP Chinese website!