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.

About Ricard Torres

Senior Front-end Software Engineer at Netcentric, from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast


Leave a Reply

Add <code> Some Code </code> if you need to.