頂部和底部的水平滾動條
問題：
是否可以有僅使用HTML 和CSS 在大表格的頂部和底部設定水平捲軸？
答案：
是的，您可以在頂部模擬第二個水平滾動條
實現：
實現：在具有水平捲動的表格上方建立一個「虛擬」div。該 div 的高度應足以容納捲軸。 將事件處理程序附加到虛擬 div 和實際表格的捲動事件。這將在移動任一滾動條時同步兩個滾動條的滾動。
代碼示例：
<code class="html"><div class="wrapper1">
<div class="div1"></div>
</div>
<div class="wrapper2">
<div class="div2">
<!-- Content here -->
</div>
</div></code>HTML：
<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>CSS:
<code class="javascript">$(function(){
$(".wrapper1").scroll(function(){
$(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
$(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
});
});</code>JavaScript:
實例：請參閱[現場範例]（此處的小提琴連結）來說明效果。以上是我可以使用 HTML 和 CSS 在表格的頂部和底部設定水平捲軸嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
