CSS停止表格行内的分页符 [英] CSS to stop page break inside of table row
问题描述
我试图避免在可能会经过一页的HTML表格的行内出现分页符。我正在使用Internet Explorer Print Preview以及BCL EasyPDFSDK将其转换为PDF以测试此功能。我将以下CSS样式以各种组合的形式应用于< td>
元素,但是对于每一个元素,我都收到了不想要的结果:
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;
}
我相信 page-break-inside:avoid !重要
正在工作,但仅限于< td>
级别。例如,我会看到< tr>
在第一个结尾处有一个< td>
页面中的所有文本都保持不变,但下面的< td>
标签将位于下一页,其所有文本都保持不变。
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.
我认为您不应将格式应用于< tr>
,所以我不确定去解决这个问题。
I didn't think you were supposed to apply formatting to <tr>
so I'm unsure how to go about fixing this.
我应该将CSS应用于< tr>
吗?还是有另一种方法来达到这个目的?
Should I apply the CSS to the <tr>
or is there another way to achieve this?
感谢您的帮助!
推荐答案
原来我需要折叠边框在table元素上,并使用
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;
}
我还将字体大小设置为 xx-小的
以防万一导致问题。这个问题似乎主要在我折叠边框时得到解决,所以它让我想知道表格是否因为分割行而出现问题。
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.
干杯!
编辑:
由于处理了这个问题,我发现在较新的web中处理行拆分要好得多浏览器。如果遇到此问题,我强烈建议将IE更新至少11个。
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.
这篇关于CSS停止表格行内的分页符的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!