使 HTML 表格可滾動

Rajeev Baniya 2023年2月19日 2022年6月15日
使 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

使用 trthtd 標記在表格中填充資料。

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

接下來,使用類選擇器和表的 thtd 元素選擇表。然後,將其 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 表格垂直滾動。

相關文章 - HTML Table