如何在表格頂部建立重複的水平捲軸？

在表格頂部和底部複製水平捲軸

在表格底部建立水平滾動條是表格的常見要求寬度過大。然而，複製頂部的捲軸需要更具創新性的方法。

為了模擬頂部的第二個水平捲軸，解決方案涉及在原始表格上方建立一個「虛擬」div。這個虛擬 div 有一個水平滾動條，其大小精確地模仿原始滾動條的寬度。

接下來，事件處理程序將附加到虛擬 div 和原始表格以同步它們的滾動行為。每當移動其中一個滾動條時，另一個滾動條就會更新以保持對齊。效果是表格頂部的第二個水平捲軸。

以下程式碼說明了此技術：

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>

Java：

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

Java：透過採用此技術，開發人員可以使用純HTML、CSS 和JavaScript 在表格頂部有效地建立重複的水平捲軸。

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