数据结构
网络
关系数据库管理系统 (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+ 次浏览
广告