顶部和底部的水平滚动条
问题：
是否可以有仅使用 HTML 和 CSS 在大表格的顶部和底部设置水平滚动条？
答案：
是的，您可以在顶部模拟第二个水平滚动条
实现：
在具有水平滚动的表格上方创建一个“虚拟”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>JavaScript:
<code class="javascript">$(function(){
$(".wrapper1").scroll(function(){
$(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
$(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
});
});</code>实例：
请参阅[现场示例]（此处的小提琴链接）来说明效果。
以上是我可以使用 HTML 和 CSS 在表格的顶部和底部设置水平滚动条吗？的详细内容。更多信息请关注PHP中文网其他相关文章！
