avoid page break inside row of table

Question

I want to avoid page break inside row of table in html, when I convert html to PDF by wkhtmltopdf. I use page-break-inside:avoid with table- its works, but I have so many rows, then not work. If set display of tr as block or some thing else then it change the formatting of table and insert double border. Or it is possible to insert the table header on each page, where the table was splitted.

Answer 1

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.

Answer 2

The best way I have found to deal with this problem in webkit browsers is to put a div inside each td element and apply the page-break-inside: avoid style to the div, like this:

...
<td>
  <div class="avoid">
    Cell content.
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }
</style>

Even though Chrome supposedly does not recognize the 'page-break-inside: avoid;' property, this seems to keep the row content from being split in half by a page break when using wktohtml to generate PDFs. The tr element may hang over the page break a bit, but the div and anything inside it will not.

Answer 3

I used the 4px trick by @AaronHill above (link) and it worked really well! I used though a simpler css rule without needing to add a class to each <td> in the table.

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content: "";
        height: 4px;
        display: block;
    }
}

Answer 4

I've found a new way to solve this problem, at least for me (Chrome Version 63.0.3239.84 (Official Build) (64-bit) on MacOS Sierra)

Add a CSS rule to the parent table:

table{
    border-collapse:collapse;
}

and for the td:

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

I actually found this solution on Stack Overflow, but it didn't show up in initial Google searches: CSS to stop page break inside of table row

Kudos to @Ibrennan208 for solving the problem!

Answer 5

I have found that page-break-inside: avoid will not work if the any of the table's parent elements are display: inline-block or flex. Make sure all parent elements are display: block.

Also consider overriding table, tr, td's display styles with CSS grid for the print layout if you keep having issues with the table.

Answer 6

The only way I found to work was to place each TR element inside it's own TBODY element, and apply the page break rules to the TBODY element via css

Answer 7

Using CSS page-break-inside won't work (this is a webkit browser issue).

There is a wkhtmltopdf JavaScript table splitting hack which breaks a long table into smaller tables automatically depending on the page size you specify (rather than page breaking after a static value of x rows): https://gist.github.com/3683510

Answer 8

I wrote the following JavaScript based on Aaron Hill's answer:

//Add a div to each table cell so these don't break across pages when printed
//See http://stackoverflow.com/a/17982110/201648
$(document).ready(function () {
    var ctlTd = $('.dontSplit td');
    if (ctlTd.length > 0)
    {
        //console.log('Found ctlTd');
        ctlTd.wrapInner('<div class="avoidBreak" />');
    }
});

Where dontSplit is the class of the table where you don't want the td's to split across pages. Use this with the following CSS (again, attributed to Aaron Hill):

 .avoidBreak {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }

This appears to be working nicely in the latest version of Chrome.

Answer 9

The 2020 solution

The only thing I could consistently get to work on all browsers is to put each row inside its own table element. This also works with node HTML-PDF. Then just set everything to page-break-inside: avoid.

table,
tr,
td,
div {
    page-break-inside: avoid;
}

The only disadvantage to this is that you must manually set the width of the columns, otherwise it looks rather strange. The following worked well for me with two columns.

td:first-child { width: 30% }
td:last-child { width: 70% }

---

Example

<table>
  <tr>
    <td>Forename</td>
    <td>John</td>
  </tr>
</table>
<table>
  <tr>
    <td>Surname</td>
    <td>Piper</td>
  </tr>
</table>
<table>
  <tr>
    <td>Website</td>
    <td>desiringgod.org</td>
  </tr>
</table>

Answer 10

Try with

white-space: nowrap; 

style to td to avoid it breaking on new lines.

Answer 11

This is an old question but I got into this same error recently. The problem in my case was related to Bootstrap's table-responsive class, which was accidentally being used on <table> element.

So, if you have the same issue, try removing table-responsive from <table> class when calling wkhtmltopdf.

Answer 12

To avoid wrong page breaks with table rows, need to use the below CSS while generating PDF files from HTML.
table tr { page-break-inside: avoid! important;margin: 4px 0 4px 0;}

Answer 13

This is what worked for me:

@media all {
  table.report { page-break-after:auto }
  table.report tr    { page-break-inside:avoid; page-break-after:auto }
  table.report td    { page-break-inside:avoid; page-break-after:auto }
  table.report thead { display:table-header-group }
  table.report tfoot { display:table-footer-group }
}