Question

我希望将th和td标记保留在同一页面中。我有多个表只有一个th和一个td标记，我在page-break-inside: avoid上使用了table，但我得到了这个结果：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）不支持表元素（issue 1223）的分页样式。在解决之前，对于这样一个小表，您应该能够将分页样式添加到容器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>

跟进一个不同的用例...一个与你的问题没有直接关系的问题，而是一般的表格标题。假设您有一个包含许多行的表，这些行需要页面并在每个页面上的内容行上方显示标题。你可以把它放在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：避免在桌面上不工作

1 个答案: