scroll-margin-bottom与打印分页完全无关，它仅用于滚动定位，打印时被浏览器忽略；表格打印分页应使用@media print下的break-before: page、break-inside: avoid（作用于<tr>而非<table>）、break-after: avoid（作用于<thead>）等属性。

scroll-margin-bottom 和打印分页完全无关

scroll-margin-bottom 是用于滚动定位的 CSS 属性，不是打印控制属性。它只在页面滚动时生效，作用于启用了 scroll-snap-type 的容器中、设置了 scroll-snap-align 的子元素上。打印预览或实际打印时，浏览器会忽略所有 scroll-margin-* 相关声明——它们不会影响分页、页边距、表格断行或任何打印输出。

表格打印分页该用哪些 CSS 属性

真正起作用的是 @media print 下的分页控制属性：

• break-before: page：在表格前强制分页（比 page-break-before: always 更现代、推荐）
• break-inside: avoid：加在 <table> 上，防止表格被截断跨页（但仅当表格整体能塞进一页时才有效）
• break-after: avoid：加在 <thead> 上，避免表头和第一行数据被分到不同页
• @page { margin: 1cm }：统一设置纸张边距，防止内容被裁切

为什么给 <table> 加 scroll-margin-bottom 没反应

常见错误操作：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 把 scroll-margin-bottom: 20px 写在 <table> 标签的 style 里，或全局 CSS 中——打印引擎不解析它
• 误以为它是“打印底部留白”开关，其实它只影响滚动锚点停靠位置
• 没配 scroll-snap-type 和 scroll-snap-align，导致该属性本身在屏幕滚动时都不生效，更别说打印

表格打印分页最易踩的坑

真实调试中高频问题：

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

• break-inside: avoid 对 <table> 失效？检查父容器是否设置了 height 或 max-height，这会干扰分页逻辑
• 表头在第二页单独出现？必须同时给 <thead> 加 break-after: avoid 和 <tbody> 加 break-before: avoid
• Chrome 打印预览看着正常，打出来缺内容？禁用所有 margin/padding，用 @page { margin: 0 } + 表格内显式 padding 控制间距
• 空 div 强制分页比属性更可靠？是的，<div style="break-before: page"></div> 放在表格前，兼容性更好，尤其面对复杂嵌套或 flex 容器时

打印分页本质是布局断裂控制，不是滚动偏移——别把两个完全不同的渲染上下文混在一起调。