Prevent HTML tables from being cut off on new pages

Are your tables being split when trying to print them?

The HTML table starts in one page and follows to the next getting cut?

I had the same problem and luckily I found a solution that works across all browsers (Chrome, Safari, Firefox, IE8, Internet Explorer 11).

Use the page-break property, which is divided in three:

  • page-break-after
  • page-break-before
  • page-break-inside

After trying multiple combinations I've found the one that just works:

@media print { 
  table,
  table tr td,
  table tr th {
    page-break-inside: avoid;
  }
}Code language: CSS (css)

More information on page-break-inside on MDN.

Comments

  1. kiran says:

    thank you, worked like a charm.

  2. Mike Be says:

    Nice! Worked for my issue. Thank you.

    1. Glad it did, Mike!

  3. anayaq says:

    this code solved my problem. thanks

  4. Jordan says:

    Great@

  5. Gene says:

    Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *