Home > Article > Web Front-end > 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!