根本原因是pdf生成引擎对@page和盒模型解析更严格：需同时重置@page margin、body的margin/padding/box-sizing，表格父容器设width/max-width，table用fixed布局+word-break，tr用page-break-inside避免跨页断裂。
为什么表格内容会溢出PDF页边距
根本原因不是CSS写错了，而是PDF生成引擎（如 wkhtmltopdf、Chrome DevTools → Print to PDF）对 @page 和容器盒模型的解析比浏览器更严格。比如：@page { margin: 0 } 只影响纸张外边距，但不覆盖用户代理默认的 body { margin: 8px }；而表格内部若用了 table-layout: auto 或未设 box-sizing: border-box，列宽计算就会在高DPI缩放（如125%系统设置）下失真，导致右侧内容被裁切。
必须加的 @page 和 body 重置规则
只写 @page { size: A4; margin: 0.5in; } 不够——body 的默认 margin 仍会叠加进去。实操中要成对清除：
-
@page中显式声明margin: 0（或统一值），避免引擎读取 UA 样式 -
body必须重置：margin: 0; padding: 0; box-sizing: border-box; - 所有表格父容器加
width: 100%; max-width: 100%;，防止因 inline-block 或浮动撑破边界
wkhtmltopdf 下表格跨页断裂的 CSS 修复点
wkhtmltopdf 对 overflow: hidden 或 auto 的父容器有渲染隔离行为，会导致整张表被“打包”移到下一页。这不是 bug，是它的布局策略：
- 移除表格外层 div 的
overflow声明（哪怕只是overflow: visible也不建议显式写） - 给
<table> 直接加 <code>style="page-break-inside: avoid;"——注意：这是防整表移页，不是防行断裂 - 真正防行断裂要用
tr级控制：tr { page-break-inside: avoid; }，但需配合display: block（wkhtmltopdf 支持有限，建议优先用thead+tbody分段） - 禁用
position: absolute在表格内使用；若必须定位，祖先容器务必加position: relative - 强制启用固定布局：
table { table-layout: fixed; width: 100%; } - 单元格内加
word-break: break-word;（break-all仅用于纯数字/URL，会破坏中文阅读节奏） - 避免
white-space: nowrap——它会让内容无视宽度直接溢出，且text-overflow: ellipsis在表格中基本无效 - 图片必须设
max-width: 100%; height: auto;，否则会拉伸整行高度并挤占空间
表格内容溢出（长文本/数字撑破列宽）的即时处理
打印PDF时最常被忽略的是单元格内容本身失控，不是布局错，是换行没生效：
复杂表格的页边距问题，本质是层层叠加的盒模型与引擎渲染策略冲突。改一个 @page 规则不够，得同时堵住 body、table、td 三个层面的默认行为漏洞。漏掉任意一层，都可能让左边距正常、右边距消失，或者顶部留白、底部截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
