最稳的表格分页起点是page-break-before: always，应插在下一页首个元素前；上设page-break-after: always常静默失效，因其仅为建议且依赖后续内容；需配合@media print、thead { display: table-header-group; }及拆分多表并用空占位。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

page-break-before: always 是表格分页最稳的起点

别在 <table> 上加 <code>page-break-after: always，它大概率静默失效——浏览器只把它当“建议”，且表格末尾没后续内容时直接跳过。真正能落地的做法，是把分页信号放在「下一页第一个元素前面」。

• 在第二页内容（比如下一个 <section></section> 或 <h2></h2>）开头插入：<div style="page-break-before: always;"></div>
• 这个 <div> 必须写在 <code>@media print 块里，否则开发时完全不可见
• 不要给它加任何 class、margin、padding、background，避免被其他样式干扰或撑出空白页
• 如果页面用了 flex/grid 布局，这个 <div> 仍能生效——它绕过了父容器的布局限制<h3>表格跨页时表头消失？必须显式声明 display: table-header-group</h3> <p>只写 <code><thead> 标签没用。浏览器不会自动复制表头到每页顶部，除非你明确告诉它：“这个头要当页眉用”。<ul> <li>在 <code>@media print 中写：thead { display: table-header-group; }
• 同时补上：tbody { display: table-row-group; }，否则旧版 Edge 可能忽略 thead 行为
• 别依赖 <tbody> 分组自动触发分页——它不触发表头重复，也难控制断点<li>如果表格被包裹在 <code>display: flex 或 display: grid 容器里，先确保该容器没设 overflow: hidden 或 transform，否则 display: table-header-group 会退化

page-break-inside: avoid 对

失效？这不是 bug，是浏览器设计逻辑

浏览器把整个 <table> 当作原子块处理：高度超一页时，<code>page-break-inside: avoid 就退化成“整表挪到下一页”，而不是“优雅断开”。<tr> 和 <code><td> 上设这个属性完全无效（CSS 规范明确不支持）。<ul><li>小表格（单页能容纳）：在外层 <code><div> 上设 <code>page-break-inside: avoid 或现代写法 break-inside: avoid

• 长表格（比如 200 行）：必须拆成多个独立 <table>，每个带完整 <code><thead> <li>子表之间插 <code><div style="page-break-before: always;"></div>，而不是靠 <hr> 或带 margin 的 <p></p>
• Chrome 115+ 对 break-inside: avoid 支持仍不稳定，所以 page-break-inside: avoid 要保留作兜底

wkhtmltopdf 导出 PDF 时分页失效？别信 break-* 属性

如果你用 wkhtmltopdf 生成 PDF，break-before、break-inside 等现代属性基本不认——它底层用的是非常老的 WebKit 引擎，对打印 CSS 支持极弱。

立即学习“前端免费学习笔记（深入）”；

• 导出前务必用 Chrome 打印预览（Ctrl+P）确认效果，别依赖开发时的页面渲染
• 优先使用 page-break-before: always + 拆表 + thead { display: table-header-group; } 这套组合，它是目前兼容性最广的方案
• 如果必须用 wkhtmltopdf，禁用所有现代 break-* 写法，只保留 page-break-*，并手动插入空 <div> 占位符<li>最容易被忽略的一点：分页是否生效，和 <code>@page { margin: ... } 强相关——边距设太大，可能把本该分页的内容挤回同一页