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

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

固定表头

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

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

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

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

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

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

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

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