如何避免跨页面拆分 HTML 表格

Posted 2023-02-24

【中文标题】如何避免跨页面拆分 HTML 表格

【英文标题】：How to avoid splitting an HTML table across pages

【发布时间】：2016-05-08 17:27:02

【问题描述】：

请原谅我的英语。

我正在打印一份 pdf 格式的大型报告，其中包括一些表格（一个接一个的表格）。为此，我首先以 html 格式生成报告，然后使用 dompdf 将其传递给 pdf 格式

这是我一个接一个地打印表格的方式：

<div>
  <table>
  -----
  </table>
</div>

<div>
  <table>
  -----
  </table>
</div>

This is the way in which printed tables when there is a page break

问题是当有分页符时，表格行被拆分。我想避免它。

我尝试使用 CSS 打印属性，但它不起作用，在其他情况下，page-break-before: always; 在不同页面上打印我的报告的每个表格。

<style type="text/css">
table  page-break-inside:auto 
tr     page-break-inside:avoid; page-break-after:auto 
thead  display:table-header-group 
tfoot  display:table-footer-group 
</style>

因为我只能在必要时在报告中的所有表格中强制分页。

请帮忙。

【问题讨论】：

dompdf 当前无法识别表格元素上的分页指令。但是您需要澄清这个问题，因为 dompdf 也不真正支持跨页面破坏单元格内容。默认情况下，如果表格单元格无法容纳在页面上，则将整行移至下一页。

【参考方案1】：

检查此链接： Link1Link2Link3

有很多与您的问题相关的答案，因此请先尝试此答案。 你可以用 CSS 试试这个：

<table class="print-friendly">
 <!-- The rest of your table here -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th 
        page-break-inside: avoid;
    
</style>

大多数 CSS 规则并不直接适用于 <tr> 标记，因为正是您在上面指出的 - 它们具有独特的 display 样式，它不允许这些 CSS 规则。但是，它们中的<td> 和<th> 标签通常做 允许这种规范-您可以轻松地将此类规则应用于所有子-<tr> 和<td>使用 CSS 如上所示。

【讨论】：

我正在尝试所有答案，但是当我转换为 DOMPDF 时，由于某种原因不起作用！！！

这是不同答案的复制粘贴。

【参考方案2】：

@sebastianpe93 尝试在印刷媒体查询中添加您的样式。应该可以的