CODEWITHSUNDEEP
htmlcsswkhtmltopdf
Ankit Mittal
Ankit Mittal

Reputation: 1520

avoid page break inside row of table

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.

Upvotes: 133

Views: 233824

Answers (13)

Codeparl
Codeparl

Reputation: 326

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

Upvotes: 0

Sher Singh
Sher Singh

Reputation: 545

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;} enter image description here

Upvotes: 0

phidias
phidias

Reputation: 518

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

Upvotes: 25

Laerte
Laerte

Reputation: 7083

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.

Upvotes: 0

gilbert-v
gilbert-v

Reputation: 1305

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>

Upvotes: 8

Stephen Saucier
Stephen Saucier

Reputation: 2087

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.

Upvotes: 14

Jason Silver
Jason Silver

Reputation: 526

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!

Upvotes: 17

vinayakshukre
vinayakshukre

Reputation: 305

Try with 

white-space: nowrap;

style to td to avoid it breaking on new lines.

Upvotes: 7

Troy Morehouse
Troy Morehouse

Reputation: 5435

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

Upvotes: 11

Aaron Newton
Aaron Newton

Reputation: 2306

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.

Upvotes: 8

Aaron Hill
Aaron Hill

Reputation: 641

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.

Upvotes: 41

Richard Pursehouse
Richard Pursehouse

Reputation: 1129

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

Upvotes: 10

Troy Alford
Troy Alford

Reputation: 27236

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.

Upvotes: 103

Related Questions