How to avoid splitting an HTML table across pages

Question

Please excuse my English.

I am printing a large report in pdf format including some tables (table after table). To do this, I first generated the report in html, then passed it on to pdf using dompdf

This is the way I print one table after another:

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

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

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

The problem is that when there is a page break, the table rows are split. I want to avoid it.

I tried using the CSS Print Properties, but it does not work, in other cases as page-break-before: always; print each table of my report on a different page.

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

As I can force page breaks in all tables in my report only if necessary.

Please help.

Answer 1

Check this links: Link1
Link2
Link3

There is lot of answer related to your question so try this answers first. You might try this with 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>

Most CSS rules don't apply to <tr> tags directly, because of exactly what you pointed out above - they have a unique display style, which doesn't allow for these CSS rules. However, the <td> and <th> tags within them usually do allow this kind of specification - and you can easily apply such rules to ALL child-<tr>'s and <td>'s using CSS as shown above.