How to Create Horizontal Scrollbars at Both Top and Bottom of a Table in HTML and CSS?

How to Place Horizontal Scrollbars on Both the Top and Bottom of a Table in HTML and CSS

To address the need for a horizontal scrollbar on both the top and bottom of a large table, it is not directly possible using only HTML and CSS. However, an effective workaround exists to simulate the presence of two scrollbars.

The trick is to position a "dummy" div over the table, granting it a height just sufficient to accommodate a horizontal scrollbar. This dummy div will serve as a "second" scrollbar.

To maintain synchronization between the dummy div and the actual table, event handlers are attached to both elements. Whenever the scrollbar of either element is moved, the other element is updated accordingly, ensuring that both scrollbars remain in sync.

For an interactive demonstration, refer to the provided fiddle:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div></code>

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

<code class="javascript">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

By employing this technique, you can effectively mimic the presence of horizontal scrollbars on both the top and bottom of your table, enabling convenient navigation for your users.

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