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.