在許多網(wǎng)頁(yè)設(shè)計(jì)中，表格是不可或缺的元素，然而，當(dāng)我們需要用表格展示過(guò)多的內(nèi)容時(shí)，表格的尺寸總是很難同時(shí)滿(mǎn)足內(nèi)容量、美觀度和易讀性的指標(biāo)。于是我們就可以通過(guò) JavaScript 實(shí)現(xiàn)表格滾動(dòng)的效果，這樣不僅能夠充分呈現(xiàn)全部?jī)?nèi)容，還可以讓頁(yè)面看上去更美觀。

實(shí)現(xiàn)表格滾動(dòng)的效果需要用到 CSS 和 JavaScript。你可以在 CSS 中設(shè)置“overflow”屬性（該屬性可以設(shè)置元素中的內(nèi)容超出元素的框截?cái)嗷蛞绯觯Ｊ褂?JavaScript 將一個(gè)透明的 DIV 添加到表格的右側(cè)，以便用戶(hù)可以使用滾動(dòng)條查看表格的內(nèi)容。下面是一個(gè)表格滾動(dòng)的基本代碼：

<div class="scrollable">
<table>
<thead>
<tr>
<th>姓名</th>
<th>城市</th>
<th>國(guó)家</th>
<th>郵編</th>
<th>電話(huà)號(hào)碼</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>北京</td>
<td>中國(guó)</td>
<td>100000</td>
<td>12345678</td>
</tr>
<tr>
<td>李四</td>
<td>上海</td>
<td>中國(guó)</td>
<td>200000</td>
<td>23456789</td>
</tr>
</tbody>
</table>
</div>

通過(guò) CSS，我們將表格封裝在一個(gè)帶有“scrollable”類(lèi)的 DIV 容器中，然后設(shè)置 DIV 的 “overflow” 屬性為 “scroll”。這意味著當(dāng)表格的高度超出 DIV 的高度時(shí)，就會(huì)顯示帶有滾動(dòng)條的 DIV。

.scrollable {
max-height: 300px;
overflow: scroll;
}

在 HTML 中嵌入 JavaScript，我們需要實(shí)現(xiàn)將每行單元格的內(nèi)容添加到透明 DIV 的 JavaScript 函數(shù)。如下所示，我們使用 JavaScript 實(shí)現(xiàn)可以滾動(dòng)表格的代碼：

document.addEventListener("DOMContentLoaded", function() {
var tableArea = document.querySelector('.scrollable');
var originalTable = document.querySelector('table');
if (!originalTable || !tableArea) { return; }
tableArea.appendChild(originalTable.cloneNode(true));
});

上述代碼實(shí)現(xiàn)了以下幾個(gè)步驟：

1. 在文檔加載后將所有代碼封裝在一個(gè)addEventListener函數(shù)中；
2. 找到容器和原始表格 DOM 元素；
3. 對(duì)于沒(méi)有找到表格或容器元素的情況，代碼退出；
4. 當(dāng)原始表格被克隆并添加到容器中時(shí)，實(shí)現(xiàn)可滾動(dòng)的表格。

如此，當(dāng)你的表格過(guò)長(zhǎng)而無(wú)法適應(yīng)頁(yè)面布局時(shí)，以上 JavaScript 表格滾動(dòng)的代碼會(huì)讓它快速、美觀地滾動(dòng)，同時(shí)展示所有的內(nèi)容。