Rafael Rafael - 1 year ago 68
CSS Question

Html table breaking row when printing

I'm currently having some issues with a table I'm trying to print, if it has more than one page, on the page break, the table row in there is being cropped. I've already tried using

table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
, but neither worked.

It may be something in conflict with my css?

Here's the Jsfiddle with it: Jsfiddle link

Answer Source

Change your CSS to this

 @media print {

  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 }

and also remove all extra


, you should have only one


and all tr between that.

that should work for you.

ref: https://www.w3.org/TR/css-print/