根本原因是表格宽度未适配纸张：需设table width:100%、max-width:210mm（A4）或210mm×140mm（A5），禁用nowrap等撑宽属性，用百分比列宽；table-layout:fixed更稳定，需为每列设width；行高用min-height+line-height控制；导出PDF错位应避免相对定位，改用绝对长度单位。
打印时表格被截断或留白过大，根本原因是没控制内容宽度
浏览器打印时不会自动缩放内容去适配纸张，@page { size: A4 } 只框定纸张物理尺寸，不改变 HTML 渲染逻辑。如果 <table> 宽度超过 210mm（A4 宽），内容就会被硬裁切；如果太窄，又会留下大片空白。
关键不是调 @page，而是让表格本身「刚好填满可用宽度」：
- 给
<table>设置width: 100%，并配合max-width: 210mm（A4）或max-width: 210mm+height: 140mm（A5） - 禁用可能撑宽的属性：移除
white-space: nowrap、display: inline-block等 - 避免用
px设列宽——改用百分比或fr（在打印中不生效，所以优先用 %） - 测试时打开 Chrome 打印预览（Ctrl+P），勾选「背景图形」看实际渲染，别信屏幕样式
table-layout: fixed 和 auto 在打印中的实际表现差异
table-layout: auto 是默认行为，浏览器逐行扫描内容算列宽，适合内容长度差异小的表格；但打印时容易因某一行含长 URL 或无空格字符串，导致整列异常变宽，进而撑破页面。
table-layout: fixed 强制按第一行 <th> 或显式 width 分配列宽，渲染快、可预测，更适合打印场景：
立即学习“前端免费学习笔记（深入）”；
- 必须为每列
<th>或第一行<td>设置width（如width: 25%或width: 50mm） - 搭配
word-break: break-word防止单元格内长文本溢出 - 注意：Firefox 对
table-layout: fixed在打印中支持较弱，建议用 Chrome/Edge 测试 - A5 场景下，列数不宜超过 4，否则单列宽度不足，文字挤成一团
打印时单元格高度失控，常见于带图片或大字号的
表格行高在打印中极易“塌陷”或“暴涨”，尤其当 <td> 里嵌了图片、多行文本或设置了 font-size: 24px —— 浏览器对 height 的处理在打印模式下不一致。
可靠做法是放弃对单行 height 的硬约束，转而控制整体节奏：
- 用
min-height + line-height 组合代替 height，例如 min-height: 20mm; line-height: 1.4;
- 图片统一加
max-height: 15mm; height: auto; width: auto;，防止拉高整行
- 避免在
<td> 上设 padding 过大（如 padding: 10px），改用 padding: 2mm 这类绝对单位
- A5 表格总高建议控制在 100–120mm 内，留出页眉页脚空间，超出部分用
page-break-inside: avoid 拆页
Chrome 打印预览里看起来正常，导出 PDF 却错位
这不是 bug，是 Chrome 打印引擎和 PDF 导出后端对 CSS 解析存在微小偏差，尤其涉及 position: absolute、transform 和百分比定位时。
真正能跨设备稳定的方案只有两个：
- 所有定位用绝对长度单位：
left: 75mm 而不是 left: 75%，bottom: 5mm 而不是 bottom: -40px
- 把动态内容（如用户输入的
<div class="user-input">）放在 <td> 内部，别用 position: absolute 脱离文档流
- 导出 PDF 前，在打印设置里关闭「标题和页脚」，它们会额外占用 15–20mm 垂直空间
- 若必须用浮动元素（如 Logo + 标题并排），改用
display: flex + justify-content: space-between，它在打印中比 float 更可靠
打印适配的本质不是让网页“看起来像纸”，而是让浏览器把内容当成一组固定尺寸的盒子来排版——所有不确定性都来自相对单位和流式布局，删掉它们，问题就少了一大半。
表格行高在打印中极易“塌陷”或“暴涨”，尤其当 <td> 里嵌了图片、多行文本或设置了 font-size: 24px —— 浏览器对 height 的处理在打印模式下不一致。
可靠做法是放弃对单行 height 的硬约束，转而控制整体节奏：
- 用
min-height+line-height组合代替height，例如min-height: 20mm; line-height: 1.4; - 图片统一加
max-height: 15mm; height: auto; width: auto;，防止拉高整行 - 避免在
<td>上设padding过大（如padding: 10px），改用padding: 2mm这类绝对单位 - A5 表格总高建议控制在 100–120mm 内，留出页眉页脚空间，超出部分用
page-break-inside: avoid拆页
Chrome 打印预览里看起来正常，导出 PDF 却错位
这不是 bug，是 Chrome 打印引擎和 PDF 导出后端对 CSS 解析存在微小偏差，尤其涉及 position: absolute、transform 和百分比定位时。
真正能跨设备稳定的方案只有两个：
- 所有定位用绝对长度单位：
left: 75mm而不是left: 75%，bottom: 5mm而不是bottom: -40px - 把动态内容（如用户输入的
<div class="user-input">）放在<td>内部，别用position: absolute脱离文档流 - 导出 PDF 前，在打印设置里关闭「标题和页脚」，它们会额外占用 15–20mm 垂直空间
- 若必须用浮动元素（如 Logo + 标题并排），改用
display: flex+justify-content: space-between，它在打印中比float更可靠
打印适配的本质不是让网页“看起来像纸”，而是让浏览器把内容当成一组固定尺寸的盒子来排版——所有不确定性都来自相对单位和流式布局，删掉它们，问题就少了一大半。
