dompdf page-break-inside：避免在 table 上不起作用

Question

我想在同一页面中同时保留 th 和 td 标签。我有多个 table，只有一个 th 和一个 td 标签，我在 table 上使用了 page-break-inside: avoid 但我得到了这个结果： pdf file 我想将标题和内容放在同一页中。我该怎么办？

编辑：这是我的 html：

<div id="compilazione_ordini">
   <table>
      <tr><th>Ord5</th></tr>
      <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
   </table>       
   <table>
      <tr><th>Ord6</th></tr>
      <tr><td><textarea name='ordini[6][testo]'></textarea></td></tr>
   </table>
</div>

和我的 css:

#compilazione_ordini table{
    border-collapse: collapse;
    width:100%;
    margin-bottom: 40px;
}
#compilazione_ordini th{
    border: 1px solid black;
    font-size: 1.1em;
    font-weight: bold;
    padding: 2px;
    text-align: left;
}
#compilazione_ordini textarea{
    border:none;
    margin:0px;
    width:100%;
    height: 16em;
    padding:2px;
    resize:vertical;
    font-family: sans-serif;
    display: block;
}
#compilazione_ordini td{
    border: 1px solid black;
}

谢谢。

Answer 1

Dompdf（0.7.1 及更高版本）不支持 table 元素 (issue 1223) 上的 page-break 样式。在解决这个问题之前，对于这么小的 table，您应该能够将 page-break 样式添加到容器 div.

.nobreak {
  page-break-inside: avoid;
}
#compilazione_ordini table{
    border-collapse: collapse;
    width:100%;
    margin-bottom: 40px;
}
#compilazione_ordini th{
    border: 1px solid black;
    font-size: 1.1em;
    font-weight: bold;
    padding: 2px;
    text-align: left;
}
#compilazione_ordini textarea{
    border:none;
    margin:0px;
    width:100%;
    height: 16em;
    padding:2px;
    resize:vertical;
    font-family: sans-serif;
    display: block;
}
#compilazione_ordini td{
    border: 1px solid black;
}

<div class="compilazione_ordini">
  <div class="nobreak">
    <table>
      <tr><th>Ord5</th></tr>
      <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
    </table>
  </div>
  <div class="nobreak">
    <table>
      <tr><th>Ord6</th></tr>
      <tr><td><textarea name='ordini[6][testo]'></textarea></td></tr>
    </table>
  </div>
</div>

跟进一个不同的用例...一个与您的问题没有直接关系但通常与 table header 相关的问题。假设您有一个包含许多行的 table，确实需要分页并在每页的内容行上方显示 header。您可以通过将其放在 THEAD 元素中来实现。

<table>
  <thead>
    <tr><th>Ord5</th></tr>
  </thead>
  <tbody>
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr>
  </tbody>
</table>

dompdf page-break-inside：避免在 table 上不起作用

dompdf page-break-inside: avoid on table not working

css

dompdf