实习排障：Paged.js 分页之后，表格第二页的列为什么歪了？

现象出现在分页边界

当时我遇到的现象是：报表的第一列为空时，第二页和后续页首行容易错位。单纯调整原始表格的 CSS 列宽无法稳定解决，问题在生成分页布局之后才格外明显。

当时试过哪些方案

我尝试过设置 colgroup、改用 nth-child、给空单元格填充内容，但只改 CSS 仍然无法解释跨页后的列宽变化。真正值得比较的是分页前后的表格 DOM 和每列的计算宽度。

最终采用的打印技术与这次故障要分开说

最终打印方案使用了 vue-print-next + Paged.js。在这之前我也试过不引入 Paged.js 的纯 CSS 方案，后来才把分页布局交给专门的引擎。

旧打印路径主要把页面 DOM 转成位图，再交给浏览器打印。面对长正文、动态表格以及需要控制的签批区域，位图式输出难以对分页断点作细粒度控制。实际交付选用 DOM 打印入口与分页布局的组合，围绕预览容器 height/overflow、@page、break-inside 和续页边界做调整。

需要特别区分三个对象：文档页眉/LOGO、数据表的列名 thead、每页签批区域。它们在续页规则里的行为不一样，不能简单归结为“一次 CSS 固定定位就解决了每页重复”。

不过，采用这套组合并不意味着第二页列宽错位自动消失。要定位问题，仍然得回到分页后的 DOM、表格布局规则和续页边界。

后来调整的排查方法

我开始把排查重点放在分页前后的 DOM 结构、colspan / rowspan、计算后的样式以及 Paged.js 版本上。只有逐项对比，才能区分是表格结构、分页算法还是 CSS 选择器造成的差异。