如何避免 tr 内的分页符？答案

【问题标题】：How to avoid page break inside tr?如何避免 tr 内的分页符？
【发布时间】：2019-02-28 23:53:16
【问题描述】：

如何避免<tr>内部的分页符？

(ANGULAR PROJECT) 我有表格（PrimeNG 表格），我想避免在打印页面后中断。我使用 Chromium/Chrome 浏览器。打印后我有这个结果：

那么，如何避免这种情况，或者如何禁用重复thead？

我试过这个链接，但不起作用：

How to avoid page break inside table row for wkhtmltopdf

"page-break-inside: avoid "- does not work

avoid page break inside row of table

【问题讨论】：

嗯，你有工作代码 sn-p 吗？可能是因为你的字体太大了……

标签： javascript html css angular

【解决方案1】：

我也有同样的问题。这种组合帮助了我

@media print {
    html, body {
        width: 210mm;
        height: auto;
    }

    body {
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }

    p, img, a, div.image, div{
        page-break-inside: avoid;
    }

    table, thead, tbody, tr, td, th, label, strong{
        page-break-inside: auto;
    }
}

【讨论】：

尝试添加@page {size: A4;}

【解决方案2】：

以下是在 Chrome 中的作用：

防止表格单元格内容被分页符分割。
防止表格行在每次分页后几行之间出现任意垂直间隙。

@media print {
  tr, td {
    break-after: auto;
    break-inside: auto;
    line-height: 1;
  }
}

【讨论】：