page-break-inside:avoid与display:table-row失效：新页首项排版错乱求助

问题根源分析 #

给div设置page-break-inside: avoid;和display: table-row;时，浏览器打印引擎对非原生表格元素的分页渲染逻辑存在兼容性问题，新页面的首个元素会因为缺失原生表格的布局上下文，出现排版分散的异常，而其余元素因为已经进入稳定渲染状态所以显示正常。

具体解决方案 #

• 改用原生表格结构承载动态条目：把每个订单条目直接放在独立的<tr>标签中，给<tr>设置page-break-inside: avoid;，同时给表格表头<thead>添加display: table-header-group;样式，让表头在每一页自动重复，也能辅助稳定布局。
• 固定表格布局规则：给表格设置table-layout: fixed;，同时为每个<td>指定明确宽度，避免动态内容导致的宽度错乱，示例代码：

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
thead {
  display: table-header-group;
}
tr {
  page-break-inside: avoid;
}
td {
  width: 25%; /* 根据实际列数调整宽度比例 */
  padding: 8px;
  border: 1px solid #ddd;
}

• 清理干扰性样式：检查条目内是否有float或position: absolute;的元素，这类样式在打印渲染中极易引发布局错乱，建议替换为flex布局实现相同布局效果。
• 统一打印页面边距：在打印专属样式中明确设置页面边距，避免浏览器默认边距挤压布局：

@media print {
  @page {
    margin: 1cm; /* 根据实际需求调整 */
  }
  body {
    margin: 0;
  }
}

内容的提问来源于stack exchange，提问作者HristoHristov