在本教程中，找到一些创建 HTML 表格的方法，该表格具有固定的表头和可滚动的正文。
当然，你需要使用CSS。
可以通过将 position 属性设置为“sticky”并将 <th> 元素的 top 属性的值指定为 0 来实现这样的结果。
使用 position 属性创建具有可滚动主体的表格的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.tableFixHead {
overflow-y: auto;
height: 106px;
}
.tableFixHead thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 16px;
border: 1px solid #ccc;
}
th {
background: #eee;
}
</style>
</head>
<body>
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
让我们看看另一种创建具有固定表头和可滚动正文的表格的方法。
在下面的示例中，我们将 <tbody> 元素的显示设置为“块”，以便可以应用高度和溢出属性。
使用 display 属性创建具有可滚动主体的表格的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.fixed_header {
width: 400px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_header tbody {
display: block;
width: 100%;
overflow: auto;
height: 100px;
}
.fixed_header thead tr {
display: block;
}
.fixed_header thead {
background: black;
color: #fff;
}
.fixed_header th,
.fixed_header td {
padding: 5px;
text-align: left;
width: 200px;
}
</style>
</head>
<body>
<table class="fixed_header">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</body>
</html>
正如我们所注意到的，在前面的示例中，我们没有使用边框。
但是，如果需要添加边框，可以使用 box-shadow 属性进行设置。
创建具有可滚动主体的表格的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.tableFixHead {
overflow-y: auto;
height: 100px;
}
.tableFixHead thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 16px;
}
th {
background: #eee;
}
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
box-shadow: inset 1px 1px #000, 0 1px #000;
}
</style>
</head>
<body>
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
日期：2020-06-02 22:15:07 来源：oir作者：oir