Home > Web Front-end > JS Tutorial > body text

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

Linda Hamilton
Release: 2024-10-31 03:02:31
Original
149 people have browsed it

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>
Copy after login

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>
Copy after login

JavaScript:

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

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!