HTML中的表格固定表头和滚动内容

在前端开发中，表格是一个非常常见的元素。但是当表格内容过多时，表格的可读性会变得非常差。本文将带着大家学习如何在HTML中实现表格的固定表头和滚动内容，提高表格的可读性。

固定表头

固定表头是指表格的表头固定在页面中的某一个位置，当表格内容过多时，表头不会随着页面的滚动而消失。下面我们通过代码案例来实现固定表头功能。

<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<!--省略其他行-->
<tr>
<td>小红</td>
<td>20</td>
</tr>
</tbody>
</table>

以上是一个简单的表格结构，接下来我们使用CSS来实现固定表头的效果。

thead, tbody {
    display: block;
}
tbody {
    height: 200px;
    overflow-y: scroll;
}
thead th {
    width: calc(100% - 17px);
    /* 17px是滚动条的宽度 */
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

我们先将表格的thead和tbody设置为display:block，将thead设置为sticky，并将位置设置为顶部，这样表头就能够固定在页面的顶部了。同时，我们还需要将tbody设置一个固定的高度，并设置overflow-y:scroll，这样表格超出高度时就会出现滚动条。

滚动内容

当表格内容过多时，我们需要将表格内容设置为可滚动，这样可以让表格更加易读。下面我们通过代码案例来实现表格滚动的效果。

<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<!--省略其他行-->
<tr>
<td>小红</td>
<td>20</td>
</tr>
</tbody>
</table>

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
tbody {
    height: 200px;
    overflow-y: scroll;
}

以上是一个简单的表格结构，接下来我们使用CSS来实现表格滚动的效果。我们将表格的宽度设置为100%，同时将表格的边框合并为一个单一的边框。然后，我们将表格的tbody设置一个固定的高度，并设置overflow-y:scroll，这样表格超出高度时就会出现滚动条。

到此，本文就讲解完了如何在HTML中实现表格固定表头和滚动内容。希望通过本文的讲解，小白们能够更好的入门前端开发。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 在HTML中嵌入本地音频记录与播放
• 下一篇： HTML中的表格分页与数据分页显示