資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學CSS 實現 HTML 表格滾動時表頭固定
我們可以使用 HTML 表格 和 CSS 建立滾動時表頭固定的表格。這有助於提高可讀性，因為使用者不必每次都滾動查看錶頭。在本文中，我們將學習和理解兩種不同的方法，使用 CSS 實現 HTML 表格滾動時表頭固定。
我們有一個包含在具有“container”類名的 div 元素內的表格。我們的任務是使用 CSS 固定 HTML 表格的表頭。
HTML 表格滾動時表頭固定的方法
以下是本文將討論的兩種使用 CSS 實現 HTML 表格滾動時表頭固定的方法，我們將逐步講解並提供完整的示例程式碼。
使用 position 屬性固定表頭
在這種方法中，我們使用了 position 屬性的 sticky 值和 overflow-y 屬性來固定 HTML 表格滾動時的表頭。
- 我們使用了 **"overflow-y: auto;"** 屬性，當表格溢位時，它會新增一個垂直捲軸。
- 我們使用了 **"position: sticky;"** 和 **"top: 0;"**，這將表頭貼上在頂部。
示例
這是一個完整的示例程式碼，實現了上述步驟來固定 HTML 表格滾動時的表頭。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
HTML Tables with Fixed Header on Scroll in CSS
</title>
<style>
.container {
overflow-y: auto;
height: 130px;
}
th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,td {
padding: 5px 10px;
border: 2px solid #626d5c;
text-align: center;
}
th {
background: #04af2f;
}
</style>
</head>
<body>
<h3>
HTML Tables with Fixed Header on Scroll in CSS
</h3>
<p>
In this example we have used position
property to fix table head on scroll
using CSS.
</p>
<div class="container">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Emp 1</td>
<td>Patna</td>
</tr>
<tr>
<td>2</td>
<td>Emp 2</td>
<td>Delhi</td>
</tr>
<tr>
<td>3</td>
<td>Emp 3</td>
<td>Mumbai</td>
</tr>
<tr>
<td>4</td>
<td>Emp 4</td>
<td>Kolkata</td>
</tr>
<tr>
<td>5</td>
<td>Emp 5</td>
<td>Bangalore</td>
</tr>
<tr>
<td>6</td>
<td>Emp 6</td>
<td>Chennai</td>
</tr>
<tr>
<td>7</td>
<td>Emp 7</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>8</td>
<td>Emp 8</td>
<td>Pune</td>
</tr>
<tr>
<td>9</td>
<td>Emp 9</td>
<td>Jaipur</td>
</tr>
<tr>
<td>10</td>
<td>Emp 10</td>
<td>Ahmedabad</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
使用 display 屬性固定表頭
在這種方法中，我們使用了 display 屬性的 block 值和 overflow 屬性來固定 HTML 表格滾動時的表頭。
- 我們使用了 **"overflow: auto;"** 屬性，當表格溢位時，它會新增一個捲軸。
- 我們在 tbody 和 th 上使用了 **"display: block;"**，這使得表頭貼上在頂部，表格主體可以滾動。
示例
這是一個完整的示例程式碼，實現了上述步驟來固定 HTML 表格滾動時的表頭。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
HTML Tables with Fixed Header on Scroll in CSS
</title>
<style>
tbody {
display: block;
width: 100%;
overflow: auto;
height: 100px;
}
thead tr {
display: block;
}
th,td {
text-align: center;
padding: 5px 10px;
width: 200px;
}
th {
background: #04af2f;
}
</style>
</head>
<body>
<h3>
HTML Tables with Fixed Header on Scroll in CSS
</h3>
<p>
In this example we have used display
property to fix table head on scroll
using CSS.
</p>
<div class="container">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Emp 1</td>
<td>Patna</td>
</tr>
<tr>
<td>2</td>
<td>Emp 2</td>
<td>Delhi</td>
</tr>
<tr>
<td>3</td>
<td>Emp 3</td>
<td>Mumbai</td>
</tr>
<tr>
<td>4</td>
<td>Emp 4</td>
<td>Kolkata</td>
</tr>
<tr>
<td>5</td>
<td>Emp 5</td>
<td>Bangalore</td>
</tr>
<tr>
<td>6</td>
<td>Emp 6</td>
<td>Chennai</td>
</tr>
<tr>
<td>7</td>
<td>Emp 7</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>8</td>
<td>Emp 8</td>
<td>Pune</td>
</tr>
<tr>
<td>9</td>
<td>Emp 9</td>
<td>Jaipur</td>
</tr>
<tr>
<td>10</td>
<td>Emp 10</td>
<td>Ahmedabad</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
結論
在本文中，我們瞭解瞭如何在 CSS 中固定 HTML 表格的表頭。我們討論了兩種不同的方法來實現 HTML 表格滾動時表頭固定：一種是使用 **position** 屬性的 **sticky** 值以及 **overflow-y** 屬性；另一種是使用 **display** 屬性的 **block** 值以及 **overflow** 屬性。我們可以使用以上兩種方法中的任何一種。
更新於：2024年7月23日
23K+ 次瀏覽
廣告