如何在 HTML 和 CSS 中在表格的頂部和底部建立水平捲軸？

如何在HTML 和CSS 中將水平滾動條放置在表格的頂部和底部

解決水平滾動條的需求在大表格的頂部和底部，僅使用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>

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

透過採用此技術，您可以有效地模仿表格頂部和底部的水平滾動條，從而為用戶提供方便的導航。

以上是如何在 HTML 和 CSS 中在表格的頂部和底部建立水平捲軸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！