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.

Cardinale

Sorry, what is the problem when using page-break-inside: avoid;? – Martella

@ChristianVarga when I use page-break-inside:avoid with tr, it is not work – Cardinale

Tried putting it on the table element instead? – Martella

The page breaking with tables is quite buggy. Have a look at this JavaScript workaround code.google.com/p/wkhtmltopdf/issues/detail?id=168#c4 – Baileybailie

actually I have tried page-break-inside:avoid with all the table elements like tr td, but it not worked. – Cardinale

@Baileybailie My friend I have tried this all already, but nothing is perfectly work – Cardinale

Yay Google for WebGL, blinding fast javascript, portable native client, but we still can't print data tables. Who would need to do that??? Only just about every business in the world. Incidentally, I tried to print a spreadsheet in google docs just now, and it consistently crashes my chrome. I think google docs prints via pdf. :/ – Stolzer

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.

Theodoretheodoric

Unfortunately this doesn't (yet) work with webkit based browsers. – Nicaragua

Yes - there are some oddities. See @Peter's answer in this question: #7707004 for some more info. – Theodoretheodoric

It only works if you take the entire table, not just tr/td: https://mcmap.net/q/175735/-how-to-avoid-page-break-inside-table-row-for-wkhtmltopdf – Dug

I've run into issues with this in IE8, possibly others, where it causes the entire table to try to fit on one page and cuts off any overflow. It also seemed to ignore the "scale to fit" option for these tables. – Langland

Yes. :( Unfortunately IE's implementations in earlier browser versions have a tendency to behave in very non-standards-compliant ways. – Theodoretheodoric

@AttilaFulop Still? Your post is 3 years old and I still can't get it to work. Thanks – Lenna

@Lenna I too couldn't get it to work, But for me <td style="text-align: left"> did the work – Snead

Looks like page-break-inside has been deprecated and been replaced with break-inside – Moreira

Firefox still breaks the table row between pages in the print preview but in the actual paper print it works fine. – Bondie

Still doesn't work. It's broken when printing to PDF as well. – Shelbashelbi

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.

Cosignatory

The margin: 4px 0 4px 0; did the trick for me, i was losing a record occasionally. Thanks – Prognostication

A problem with this approach is that sometimes only a few cells of a row are broken to the next page, although each cell on its own will not get broken. – Magician

@Magician Yes. Did you find a work around for this ? – Thanatopsis

Doesn't work. Nothing works. I tried every "solution" on the internet and there is no solution. We just have to accept crap software that can't even render a table. – Halflight

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

Accursed

This didn't work for me – Shelbashelbi

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!

Allomorph

its solved issue of cutting table row its break other design – Shelter

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.

Bandur

I fixed my multiple tables being broken up in weird places with overlapping text in Chrome, with help from this question: added display:block !important; to body and div when printing, as well as page-break-inside: avoid; to table. – Lederhosen

I was about to give up but this answer give me the right threat to pull on. I am using tailwind and had flex classes applied to some containing elements. I added print:block to those and my table suddenly started respecting the page-break-inside directives. Thank you! – Horace

Answer 6

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

Caprine

This js hack will work if I just want print webpage without wkhtmltopdf? – Hochman

This is the only one that worked for me. Also works with HTML-PDF library. – Trahurn

Answer 7

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

Ramadan

This works better than the rest for me on Chromium Version 40.0.2214.111 (64-bit) on Arch Linux. It's ugly and feels hacky - but apparently multiple tbody elements are valid inside a table #3077208 – Introjection

This does not work for me (Chrome 56.0.2924.87 (64-bit), Mac OS 10.12.2). – Skyrocket

Thanks! This made me find a solution that worked for me - https://mcmap.net/q/175737/-how-to-apply-css-page-break-to-print-a-table-with-lots-of-rows – Idellaidelle

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 https://mcmap.net/q/174043/-avoid-page-break-inside-row-of-table
$(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.

Anthony

I am rendering large tables into PDF format using wkhtmltopdf, and this is the only solution that yielded acceptable results. It could be better (Webkit doesn't repeat cell borders after a page break), but at least the content is there. Thanks! – Hamnet

This doesn't work when printing using Ctrl+P – Shelbashelbi

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>

Trahurn

Could you provide an example table HTML? Thanks. – Raseda

Thank you, @Trahurn for the edit with example. I will try this. – Raseda

This is the solution I end up using. I need to group 2 to 4 rows that represents an entity of data, so page breaks only between these groups of rows, but not inside. I put each group into separate table. The only issue here is getting consistent column widths across all tables. – Ethnocentrism

This has been replaced with break-inside developer.mozilla.org/en-US/docs/Web/CSS/break-inside – Ferromanganese

It has worked like a charm for my case. Thanks a lot. – Hyperemia

Answer 10

Try with

white-space: nowrap; 

style to td to avoid it breaking on new lines.

Miguelmiguela

A lot simpler than the other solutions. Is this a new thing? – Xylography

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.

Saga

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

Baras

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

Bonnet