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

Question

I want to keep both the th and td tags in th same page. I have multiple table with only one th and one td tag and I used page-break-inside: avoid on the table but I get this result: pdf file I would like to have the title and the content in the same page. How can I do ?

EDIT: This is my 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>

and my 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;
}

Thanks.

Answer 1

Dompdf (up to and including 0.7.1) does not support page-break styling on table elements (issue 1223). Until that is resolved, for such a small table, you should be able to add the page-break styling to a container 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>

---

Following up for a different use case...one not directly related to your question but to table headers in general. Let's say you have a table with lots of rows that does need to page and display the header above the content rows on each page. You can do this by placing it in a THEAD element.

<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>