表格<tr>与<tbody>内page-break-inside样式失效问题求助

问题原因 #

浏览器和打印引擎对表格原生元素（<tr>、<tbody>）的分页样式支持存在限制，默认的表格布局规则会忽略page-break-inside: avoid属性，导致行被分页拆分。

可行解决方案 #

以下是经过验证的有效处理方式，结合你的代码调整：

1. 调整表格基础样式
   给外层表格添加以下CSS，确保打印时的布局兼容性：

   table {
     width: 100%;
     table-layout: fixed;
     border-collapse: separate;
     border-spacing: 0;
   }
   

2. 给行/tbody添加兼容的分页样式
   把<tbody>和<tr>的样式修改为：

   <tbody style="page-break-inside: avoid; display: table-row-group;">
     <tr style="page-break-inside: avoid;">
       <!-- 你的单元格内容 -->
     </tr>
   </tbody>
   

   部分打印引擎需要强制指定display属性来识别分页规则，table-row-group是<tbody>的默认值，但显式声明可以触发引擎的样式解析。

3. 备选方案：用div模拟表格行（极端场景）
   如果上述方法仍不生效，可以把每一行的内容包裹在<div>中，模拟表格布局，确保分页规则生效：

   <div style="display: table-row; page-break-inside: avoid;">
     <div style="display: table-cell; border-bottom: 1px solid black; border-right: 1px solid black;border-left:1px solid black;">{{ns.count}}</div>
     <!-- 其他单元格同理替换为div -->
   </div>
   

修改后的完整代码示例 #

{% for item in child.items %}
  {%set ns.count = ns.count + 1%}

  <tbody style="page-break-inside: avoid; display: table-row-group;">
    <tr style="page-break-inside: avoid;">
      <td style="border-bottom: 1px solid black; border-right: 1px solid black;border-left:1px solid black;">{{ns.count}}</td>
      <td colspan="3" style=" white-space: normal;  border-bottom: 1px solid black; border-right: 1px solid black;">{{item.sales_description}}</td>
      <td style=" border-bottom: 1px solid black; border-right: 1px solid black;">85177090</td>
      <td style=" border-bottom: 1px solid black; border-right: 1px solid black;">{{item.qty}}</td>
      <td style=" border-bottom: 1px solid black; border-right: 1px solid black;">PC</td>
      <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{item.rate}}</td>
      <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{item.qty * item.rate}}</td>
      <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">0</td>
      <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">0.00</td>
      <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{taxlist[0]}}</td>
      <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{(item.qty * item.rate * taxlist[0])/100}}</td>
      <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{taxlist[1]}}</td>
      <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{(item.qty * item.rate * taxlist[1])/100}}</td>
    </tr>
  </tbody>
{% endfor %}

注意事项 #

• 测试时务必使用浏览器的打印预览功能，不要依赖屏幕渲染效果
• 不同浏览器（Chrome、Firefox、Edge）的打印引擎存在差异，可能需要针对特定浏览器微调样式
• 避免给表格或行设置overflow: hidden这类会破坏分页规则的属性

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