CSS to stop page break inside of table row

本秂侑毒 提交于 2019-12-24 06:26:12

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!