使 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 表格垂直滾動。