网页打印时如何让长表格表头始终显示在每页顶部？
2026-5-25
实现打印时表头每页重复显示的方案
这个问题其实很常见，用CSS的打印媒体查询就能轻松解决，我给你整理了最靠谱的实现方式，亲测在主流浏览器（Chrome、Firefox、Edge）都能生效：
核心实现步骤
首先要确保你的表格结构是标准的：用<thead>包裹表头行，<tbody>包裹所有内容行——这是表头能重复打印的基础结构。
然后添加专门的打印样式：
/* 针对打印场景的样式 */ @media print { /* 强制表头在每一页打印时都显示 */ thead { display: table-header-group; } /* 可选：避免表格行被跨页截断，提升打印可读性 */ tbody tr { page-break-inside: avoid; } /* 可选：强制打印表头的背景色（部分浏览器默认不打印背景） */ thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; background-color: #f5f5f5 !important; } }
关键属性解释
display: table-header-group：这是CSS表格布局的原生属性，专门用于让<thead>元素在分页时自动重复显示在每页顶部，是实现需求的核心。page-break-inside: avoid：防止单个表格行被拆分到两页，让打印出来的内容更整齐。print-color-adjust: exact：强制浏览器打印元素的背景色，默认情况下很多浏览器会关闭背景打印，如果你表头有背景样式，这个属性能确保它显示出来。
注意事项
- 不要给表格设置
overflow: hidden、display: flex这类会破坏原生表格布局的样式，否则table-header-group可能失效。 - 如果是带合并单元格（
colspan/rowspan）的复杂表头，部分浏览器可能有兼容性问题，建议给每个<th>设置固定宽度，避免表头和内容列宽不一致。 - 测试时用浏览器的打印预览（快捷键
Ctrl+P），可以快速调整样式，不用浪费纸张。 - 部分浏览器的打印设置里需要手动勾选「背景图形」（比如Chrome），才能看到表头的背景色。
完整示例代码
<!DOCTYPE html> <html> <head> <style> /* 常规样式 */ table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f5f5f5; } /* 打印专用样式 */ @media print { thead { display: table-header-group; } tbody tr { page-break-inside: avoid; } thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } </style> </head> <body> <table> <thead> <tr> <th>序号</th> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> </thead> <tbody> <!-- 这里可以添加大量表格行，模拟跨多页的情况 --> <tr><td>1</td><td>笔记本电脑</td><td>5999</td><td>1</td><td>5999</td></tr> <tr><td>2</td><td>无线鼠标</td><td>99</td><td>2</td><td>198</td></tr> <!-- ... 更多行 ... --> </tbody> </table> </body> </html>
内容的提问来源于stack exchange，提问作者omega
