Rafael Rafael - 2 months ago 18
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 }
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

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/

Comments