HTML5原生支持跨页自动重复，前提是语义结构正确：必须用包裹表头、包裹数据、包裹页脚，且顺序为thead-tfoot-tbody；现代浏览器（Chrome/Edge/Firefox）默认启用该功能，无需额外CSS声明。
在打印长表格时，让表头（<thead>）在每页顶部自动重复，是HTML5原生支持的功能，但需要满足特定条件。关键在于正确使用 <code><thead> 和 <code><tfoot> 标签，并配合合适的CSS打印样式——浏览器（如Chrome、Edge、Firefox）会自动识别并重复显示 <code><thead> 内容，<code><tfoot> 则可能在每页底部重复（部分浏览器支持有限）。
<h3>确保表格结构语义正确</h3>
<p>必须将表头内容包裹在 <code><thead> 中，表体用 <code><tbody>，页脚用 <code><tfoot>。三者顺序不能错，且每个只能出现一次（<code><tbody> 可多个）。错误结构（如把 <code><thead> 放在 <code><tbody> 之后）会导致打印时无法识别。
<ul>
<li>✅ 正确结构：<code><table>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>...</tbody>
</table>
<thead> 或用 <code><div> 模拟表头；或把 <code><thead> 套在 <code><tr> 外面不闭合
<h3>启用打印时的表头重复（无需额外CSS）</h3>
<p>现代主流浏览器默认开启该行为——只要结构合规，打印预览中长表格跨页时，<code><thead> 会自动出现在每页顶部。无需写 <code>@media print { thead { display: table-header-group; } }（这是旧方案，现已冗余）。
- Chrome / Edge / Firefox 均支持此特性，无需额外声明
- 注意：Safari（macOS/iOS）对
<thead> 打印重复支持不稳定，建议测试实际输出 <li>若未生效，先检查是否禁用了“背景图形”选项（Chrome打印设置中勾选“背景图形”可确保样式正常）</li> <h3><code><tfoot> 的实际作用与限制 <p><code><tfoot> 在打印中理论上应每页底部重复，但目前仅Firefox较可靠支持；Chrome和Edge基本忽略它在打印中的重复逻辑，仅渲染在表格末尾。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>如需页脚信息，更稳妥的做法是用CSS的 <code>@page :first或@page :left/:right+content伪元素（但仅限页眉/页脚区域，不能含表格样式） - 若坚持用
<tfoot>，请在Firefox中验证效果，并为其他浏览器提供降级方案（如每页末尾手动插入摘要行） <h3>提升打印体验的实用建议</h3> <p>即使表头能自动重复，仍需注意排版细节，避免内容被截断或错位：</p> <ul><li>给 <code><th> 设置固定宽度（如 <code>width: 120px）或使用table-layout: fixed，防止跨页时列宽突变 - 避免在
<thead> 中使用 <code>height或大 padding，易导致表头过高挤占正文空间 - 打印前用
window.print()触发，或在开发者工具中切换到“打印”媒体类型预览效果 - 对超长单元格内容，用
word-break: break-word防止单字撑破页面
