单机游戏大全免费

游戏大全

当前位置:首页 > 互联网 IT业界 > html如何固定表头

html如何固定表头

admin 互联网 IT业界 78热度

要固定HTML表格的表头,可以使用CSS样式来实现,以下是一种常见的方法:

(图片来源网络,侵删)
<style> table { bordercollapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; textalign: left; } thead { position: sticky; top: 0; backgroundcolor: #f2f2f2; } </style> <table> <thead> <tr> <th>小标题1</th> <th>小标题2</th> <th>小标题3</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <!其他行 > </tbody> </table>

在上面的代码中,我们使用了position: sticky和top: 0来将表头固定在页面顶部。backgroundcolor属性用于设置表头的背景颜色,你可以根据需要进行修改。

请注意,这种方法在某些浏览器上可能不起作用,因为position: sticky是相对新的CSS特性,确保你的目标浏览器支持该特性。

更新时间 2024-05-22 12:18:12