我可以只使用 HTML 和 CSS 將重複的水平捲軸（頂部和底部）添加到表格中嗎？

如何在表格頂部和底部添加水平滾動條

在表格超出屏幕範圍的情況下，合併水平滾動條以方便地導航其內容變得至關重要。然而，一個常見的要求是，用戶更喜歡在表格的頂部和底部都有此滾動條以實現無縫滾動。是否可以僅透過 HTML 和 CSS 來實現此目的？

答案是肯定的。為了模擬雙水平捲軸，將「虛擬」div 放置在實際表格元素上方，其高度足以容納捲軸。然後將事件處理程序附加到虛擬 div 和表格，確保滾動任一捲軸同步另一個元素。

有關實際演示，請參閱以下內容範例：

HTML:

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

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

CSS:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

CSS:

CSS:JS: 這種技術有效地創造了一種錯覺第二個水平滾動條，在表格頂部和底部提供方便直觀的滾動體驗。

以上是我可以只使用 HTML 和 CSS 將重複的水平捲軸（頂部和底部）添加到表格中嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！