如何僅使用 HTML 和 CSS 為表格建立同步的頂部和底部水平捲軸？

如何僅使用HTML 和CSS 在表格的頂部和底部創建水平滾動條

問題：

使用者想要在大表格的頂部和底部新增水平捲軸不使用任何JavaScript。

解決方案：

可以透過使用CSS 在上面建立一個「虛擬」div 來模擬表格頂部的第二個水平捲軸具有水平滾動功能且高度剛好足以容納捲軸的表格。然後，可以將「捲動」事件的事件處理程序附加到虛擬元素和實際表格，從而在移動任一捲軸時同步兩個元素的滾動。

程式碼片段：

HTML：

<div>
<p><strong>CS S:</strong></p>
<pre class="brush:php;toolbar:false">.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;
}

JavaScript:

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

虛擬div (.div1) 將作為第二個水平滾動條出現在實際表格元素(.div2) 上方。透過同步兩個元素的捲動，使用者可以從頂部或底部滾動條捲動表格內容。