Html table breaking row when printing

Question

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

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

<tbody>...</tbody>

, you should have only one

<tbody></tbody>

and all tr between that.

that should work for you.

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