Prevent HTML tables from being cut off on new pages

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:

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)

Principal Frontend Software Engineer at Cognizant Netcentric, from Barcelona, Haidong Gumdo Master (Korean martial art of the sword), street photographer, travel lover, podcaster, TV addict, Boston Red Sox fan, and privacy advocate.