3

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Rafael
  • 1,437
  • 6
  • 23
  • 41

1 Answers1

4

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/

Majid
  • 2,507
  • 2
  • 19
  • 18
  • Thanks! I've changed the css to the one you posted and added `height: 100%;` to the css. It worked on Windows but on Mac, in the same browsers the crop is happening out of the place like in this image: [link](http://imgur.com/a/7imm6) – Rafael Aug 24 '16 at 17:29
  • which browsers have you tested? can you take a screenshot and put it here as a link? – Majid Aug 25 '16 at 01:07
  • I've managed to fix it by using the A4 sheet size on width and height on the `@media print` css. Thanks anyway! – Rafael Aug 25 '16 at 11:56
  • In my case I did not need to defind the breaking for `td`, it was just enough doing it for `tr` – jediz May 08 '18 at 11:33