Css To Stop Page Break Inside Of Table Row

I am trying to avoid having page breaks inside of rows for my HTML tables that may go past one page. I am using Internet Explorer Print Preview and also BCL EasyPDFSDK to convert t

Solution 1:

Turns out I needed to collapse borders on the table element and reduce my padding to only 1px using

table { border-collapse: collapse; }
td {
    page-break-inside: avoid !important;
    white-space: nowrap;
    overflow: hidden;
    padding: 1px;
    font-size: xx-small;
}

I also set the font-size to xx-small just in case that was causing an issue. The issue seemed to primarily be resolved when I collapsed borders, so it makes me wonder if the table was having issues splitting the rows because of that.

Cheers!

EDIT:

Since dealing with this issue, I have found out that the row splitting is handled much better in newer web browsers. I highly recommend updating IE to at least 11 if you are experiencing this issue.

Solution 2:

I just added the below css to my @media print and it worked!!!

None of the solutions applied to td, th, tr worked

table {
  page-break-inside: avoid !important;
}