在打印或 PDF 生成场景中， 或 上直接设置 page-break-inside: avoid 无效；真正生效的是为 和 元素统一添加该样式，且值必须为 avoid（而非 never 等非法值）。

在打印或导出 pdf（如通过 wkhtmltopdf、puppeteer 或浏览器原生打印）时，表格行（`

`）被意外截断到两页之间是常见问题。尽管开发者常尝试在 ` ` 或 ` ` 上设置 `page-break-inside: avoid`，但根据 css 分页规范，该属性**对表格行级元素无效**——浏览器和渲染引擎仅支持在块级容器（如 `

`）或单元格（``/` `）上可靠生效。

要彻底避免表格行跨页断裂，核心方案是将 page-break-inside: avoid 应用于每个单元格：

/* ✅ 正确写法：作用于 td/th，确保整行随单元格一起保持完整 */
td, th {
  page-break-inside: avoid;
  /* 可选：增强兼容性 */
  break-inside: avoid; /* CSS Fragmentation Level 3 标准属性，现代浏览器推荐 */
}

⚠️ 注意事项：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• page-break-inside: avoid 的合法值仅有 auto 和 avoid；never、false、forbidden 均为无效值，会被浏览器忽略。
• 单个 内容若高度超出页面剩余空间（例如含大量文本或图片），仍可能触发强制分页——此时需配合 white-space: normal、合理设置 max-height 或使用 overflow: hidden 控制内容溢出。
• 若使用 @media print，建议将上述样式限定在打印上下文中，避免影响屏幕显示：

  @media print {
    td, th {
      page-break-inside: avoid;
      break-inside: avoid;
    }
  }

此外，你的模板代码中存在结构性问题：

标签被错误地置于 {% for %} 循环内部，导致每个 都包裹独立的 （违反 HTML 表格规范）。正确结构应为：

<!-- ✅ 合理结构：一个 <tbody> 包裹所有 <tr> -->
<tbody>
  {% for item in child.items %}
    {% set ns.count = ns.count + 1 %}
    <tr>
<td style="border: 1px solid black;">{{ ns.count }}</td>
      <td colspan="3" style="white-space: normal; border: 1px solid black;">{{ item.sales_description }}</td>
      <!-- 其他 <td> ... -->
    </tr>
  {% endfor %}
</tbody>

最后提醒：break-inside: avoid 是更现代、标准化的替代方案（CSS Fragmentation），在 Chromium、Firefox 和 Safari 中均有良好支持，建议优先使用；而 page-break-* 系列属性属于已逐步废弃的 CSS2 打印模块，仅作兼容性兜底。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！