Can I Have Horizontal Scrollbars at Both the Top and Bottom of a Table Using HTML and CSS?

Horizontal Scrollbars on the Top and Bottom

Question:

Is it possible to have horizontal scrollbars both at the top and bottom of a large table using only HTML and CSS?

Answer:

Yes, you can simulate a second horizontal scrollbar at the top of an element.

Implementation:

Create a "dummy" div above the table that has horizontal scrolling. This div should be just tall enough for a scrollbar.

Attach event handlers to the scroll event of both the dummy div and the actual table. This will synchronize the scrolling of both scrollbars when either is moved.

Code Sample:

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>

Live Example:

See the [live example](fiddle link here) to illustrate the effect.

The above is the detailed content of Can I Have Horizontal Scrollbars at Both the Top and Bottom of a Table Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!