如何仅使用 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) 上方。通过同步两个元素的滚动，用户可以从顶部或底部滚动条滚动表格内容。