问题
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 to PDF to test this. I applied the following CSS styling in various combinations to the <td>
elements but for each one I was getting an undesired result:
td {
page-break-inside: avoid !important;
white-space: nowrap;
overflow: hidden;
margin: 4px 0 4px 0;
}
I believe the page-break-inside: avoid !important
is working, but only on the <td>
level. For example, I will see a <tr>
that has one <td>
on the end of the first page with all of the text intact, but the following <td>
tags would be on the next page with all of their text intact.
I didn't think you were supposed to apply formatting to <tr>
so I'm unsure how to go about fixing this.
Should I apply the CSS to the <tr>
or is there another way to achieve this?
Thanks for the help!
回答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.
来源:https://stackoverflow.com/questions/43517321/css-to-stop-page-break-inside-of-table-row