使 HTML 表格可滾動

本文將介紹一種製作可垂直滾動的 HTML 表格的方法。

將 CSS overflow-y 屬性設定為 scroll 以使 HTML 表格可滾動

當 HTML 表格很長時，需要僅滾動表格而不是整個頁面的功能。為了實現這個功能，我們可以使用 overflow-y 屬性。

這裡，y 代表 y 軸。該屬性定義了塊級元素沿垂直軸的溢位屬性。

scroll 值使塊級元素可以從上到下滾動。

為了使 HTML 表格可以垂直滾動，我們可以用 <div> 包裹表格。然後，我們可以使用 height 屬性為 <div> 設定一個固定的高度。

之後，我們可以將 overflow-y 屬性設定為 scroll。如果表格高度超過我們設定的 div 的高度，那麼 overflow-y: scroll 將使表格在 y 方向（垂直）可滾動。

因此，我們需要確保表格的高度超過 <div> 的高度。

例如，建立一個 div 並給它一個類名 container。在那個 div 中，建立一個表並給它一個類名 data。

使用 tr、th 和 td 標記在表格中填充資料。

在 CSS 中，選擇 container 類並將其 height 屬性設定為 70px 並將其 overflow-y 屬性設定為 scroll。確保表格內容的高度超過 70px。

接下來，使用類選擇器和表的 th 和 td 元素選擇表。然後，將其 border 屬性設定為 1px solid black，將 border-collapse 屬性設定為 collapse，將 padding 設定為 4px。 （注意：這不是強制性的，這是為了使表格更具可讀性。）

下面的示例顯示錶格是垂直可滾動的，因為表格的高度大於 div 或 .container 的高度。

示例程式碼：

<div class="container">
<table class="data">
<tr>
 <th>id</th>
 <th>Name</th>
 <th>Country</th>
</tr>
<tr>
 <td>1</td>
 <td>John Doe</td>
 <td>Nepal</td>
</tr>
<tr>
 <td>2</td>
 <td>Sam Smith</td>
 <td>India</td>
</tr>
<tr>
 <td>3</td>
 <td>Jack Daniels</td>
 <td>China</td>
</tr>
</table>
</div>

.container {
 height: 70px;
 overflow-y: scroll;
}
.data, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 padding: 4px;
}

結果，當我們載入頁面時，整個表格是不可見的。這是因為我們將 70px 設定為容器的高度。

但是當我們垂直向下滾動時，我們可以看到表格的其餘內容。

這樣，我們可以使用 overflow-y 屬性並將其設定為 scroll 使 HTML 表格垂直滾動。