HOWTO · JavaScript
JavaScript 表格滚动
要在网页中滚动表格内容，我们可以依赖一些 JavaScript 属性来依次执行任务。overflow、overflowX 和 overflowY 的使用使表格可滚动且可访问。
对于 web 开发和利用网页空间，可滚动内容或 div 或 table 可以积极贡献。一个可滚动的部分可以很容易地节省一大堆行，并且可以重新设计网页。
我们的示例集将演示 overflow: "auto" 和 overflowX, overflowY 属性的使用。这些属性需要更少的代码行来实现可滚动的表格内容。
使用 JavaScript 中的 overflow 属性滚动表格
table 的基本结构提供了大量数据。我们将启动一个可滚动的表格以最小化空间并利用页面区域。
我们将设置 tbody 实例属性 overflow 为 auto。它会自动弹出一个垂直和水平移动的导航器。
代码 - HTML 文件：
<table id="myTable">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody id="bd">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
代码 - CSS 文件：
thead,
tbody {
display: block;
}
tbody {
max-height: 100px;
width: 200px;
}
代码 - JavaScript 文件：
document.getElementById('bd').style.overflow = 'auto';
输出：
在 JavaScript 中使用 overflowX 和 overflowY 滚动表格
这个例子暗示了一种几乎类似的方式来执行制作可滚动表格的任务。不同之处在于我们明确定义了轴导航。
我们将设置 overflowX 为 none 和 overflowY 为 auto。
代码 - HTML 文件：
<table id="myTable">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody id="bd">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
代码 - CSS 文件：
thead,
tbody {
display: block;
}
tbody {
max-height: 100px;
width: 200px;
}
代码 - JavaScript 文件：
document.getElementById('bd').style.overflowX = 'none';
document.getElementById('bd').style.overflowX = 'auto';
输出：
