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.

asked Feb 15, 2012 at 6:22 Ankit Mittal Ankit Mittal 1,500 2 2 gold badges 11 11 silver badges 11 11 bronze badges Sorry, what is the problem when using page-break-inside: avoid; ? Commented Feb 15, 2012 at 7:29 @ChristianVarga when I use page-break-inside:avoid with tr, it is not work Commented Feb 15, 2012 at 7:52

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

Commented Feb 15, 2012 at 9:30

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

Commented Feb 16, 2012 at 7:52

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. :/

Commented May 20, 2014 at 8:05

13 Answers 13

You might try this with CSS:

  table.print-friendly tr td, table.print-friendly tr th

answered Aug 8, 2012 at 23:00 Troy Alford Troy Alford 27.1k 11 11 gold badges 65 65 silver badges 83 83 bronze badges Unfortunately this doesn't (yet) work with webkit based browsers. Commented Mar 12, 2013 at 19:17

Yes - there are some oddities. See @Peter's answer in this question: stackoverflow.com/questions/7706504/… for some more info.

Commented Mar 13, 2013 at 2:08 It only works if you take the entire table, not just tr/td: stackoverflow.com/a/13525758/729324 Commented Dec 30, 2013 at 13:36 @AttilaFulop Still? Your post is 3 years old and I still can't get it to work. Thanks Commented May 13, 2016 at 21:41 Looks like page-break-inside has been deprecated and been replaced with break-inside Commented Sep 1, 2019 at 19:27

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:

.  Cell content.
  .

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.