html表格打印精确定位需靠@page设置a4纸张与页边距、table-layout:fixed强制列宽、空div加page-break-before实现分页锚点，并显式声明颜色/边框/字体单位等；不同浏览器解析差异大，必须真机打印测试。
HTML表格打印无法精确定位内容，本质是浏览器打印引擎不支持像素级坐标控制；所谓“精确定位”，只能靠纸张尺寸、页边距、分页锚点和固定布局协同逼近目标位置。
用 @page 设置 A4 纸张与页边距
浏览器默认打印区域不等于 A4 实际可印范围，必须显式声明。否则预览里看着对齐，打出来偏移几毫米很常见。
-
@page规则必须写在<style></style>或外部 CSS 中，不能内联；size: A4和margin缺一不可 - 推荐用
mm单位（如margin: 15mm），比px更稳定；Chrome 和 Edge 对in或cm支持不一致 - 不要只设
body { margin: 0 }—— 这不影响物理纸张边界，@page才是真正起作用的层 - 某些打印机驱动会额外加白边，测试时务必用“实际大小”而非“适应页面”缩放模式
table-layout: fixed + width 强制列宽不坍缩
打印时表格列宽常被压缩或撑开，尤其含长文本或空单元格时。这不是 bug，是浏览器为适配纸张自动重算 layout 的结果。
- 必须设
table { table-layout: fixed; width: 100%; }，否则th/td的width会被忽略 - 每列用
width（推荐px或百分比），别依赖min-width或flex—— 打印引擎不解析这些 - 移动端 Safari 尤其敏感，需额外加
* { -webkit-print-color-adjust: exact; }防背景/颜色丢失 - 避免
colspan/rowspan跨太多列，容易触发 layout 错乱，拆成多个独立tr更稳妥
用空 div + page-break-before 实现“精确分页锚点”
想让某段内容（比如表头、logo、签名栏）严格出现在第二页顶部？thead { display: table-header-group } 在 Chrome 120+ 已基本失效，page-break-after 又常因表格高度浮动而错位。
- 最可靠做法：在第一页末尾插入一个空
<div style="page-break-before: always;"></div> - 这个
div必须是块级、无 padding/margin、不设 height —— 任何样式干扰都可能让它被吞掉或错位 - 不要把它塞进
<tbody> 里，放在整个 <code><table> 之后，紧贴下一个内容块之前<li>如果要重复页眉（如每页左上 logo），得用绝对定位 + <code>@page的margin-top预留空间，再用position: fixed; top: 0;—— 但仅限简单图形，文字易被裁剪 - 所有需打印的文本，必须显式设
color: #000 !important；链接加a:link, a:visited { text-decoration: underline !important; } - 用
.no-print { display: none !important; }标记非内容区，比visibility: hidden更彻底 - 表格边框消失？必须分别给
table、th、td设border: 1px solid #000 !important，只设table不够 - 字号建议用
pt（如font-size: 10pt），比px在不同 DPI 打印机上更一致
隐藏非关键元素 & 强制文本可见
打印时导航栏、按钮、图标全消失了？不是 bug，是浏览器默认禁用 background、shadow、color-adjust。
真正难的不是写对某一行 CSS，而是不同浏览器对同一段 @media print 的解析差异——Chrome 可能渲染出三页，Edge 却只出两页还截断表格。每次改完都得真机打印测试，光看预览没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
