<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上下双滚动条表格</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<style>
/* 上下滚动条 */
#scrollTop {
overflow-x: auto;
overflow-y: hidden;
}
#scrollTop div {
height: 1px; /* 占位，不影响视觉 */
}
/* 表格容器 */
#scrollBody {
overflow: auto;
max-height: 300px; /* 表格高度超过时出现纵向滚动条 */
}
/* 表格宽度，确保横向滚动 */
table {
min-width: 1200px;
}
</style>
</head>
<body>
<div class="container">
<!-- 顶部滚动条 -->
<div id="scrollTop"><div></div></div>
<!-- 表格容器 -->
<div id="scrollBody" class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
<th>数量</th>
<th>价格</th>
<th>备注</th>
<th>列7</th>
<th>列8</th>
<th>列9</th>
<th>列10</th>
</tr>
</thead>
<tbody>
<!-- 示例多行数据 -->
<tr>
<td>电脑</td><td>2026-03-10</td><td>已付款</td><td>5</td><td>5000</td><td>测试</td><td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
<tr>
<td>显示器</td><td>2026-03-11</td><td>未付款</td><td>2</td><td>1500</td><td>测试2</td><td>e</td><td>f</td><td>g</td><td>h</td>
</tr>
<tr>
<td>鼠标</td><td>2026-03-12</td><td>已付款</td><td>10</td><td>300</td><td>测试3</td><td>i</td><td>j</td><td>k</td><td>l</td>
</tr>
<tr>
<td>键盘</td><td>2026-03-13</td><td>未付款</td><td>7</td><td>700</td><td>测试4</td><td>m</td><td>n</td><td>o</td><td>p</td>
</tr>
<!-- 可添加更多行测试纵向滚动 -->
</tbody>
</table>
</div>
</div>
<script>
function syncScroll() {
var scrollTop = document.getElementById('scrollTop');
var scrollBody = document.getElementById('scrollBody');
var table = scrollBody.querySelector('table');
// 设置上方滚动条宽度与表格一致
scrollTop.firstElementChild.style.width = table.scrollWidth + 'px';
// 同步滚动
scrollTop.onscroll = function () {
scrollBody.scrollLeft = scrollTop.scrollLeft;
};
scrollBody.onscroll = function () {
scrollTop.scrollLeft = scrollBody.scrollLeft;
};
}
window.onload = syncScroll;
window.onresize = syncScroll; // 窗口大小变化时重新计算宽度
</script>
</body>
</html>
