HTML / CSS：打印表时为空页+只有标题页 [英] HTML/CSS: empty page + only header page when printing table
本文介绍了HTML / CSS：打印表时为空页+只有标题页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不明白为什么有一个空白页+一个页面只有表头在本文档。
>
$这是完整的HTML代码：
<！DOCTYPE html>
< html lang =en>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< style media =printtype =text / css>
h1：not（：first-child）{
page-break-before：always;
}
表{
page-break-before：avoid;
page-break-inside：avoid;
padding：0; border-collapse：collapse; }
table tr {
border-top：1px solid #cccccc;
background-color：white;
margin：0;
padding：0; }
table tr：nth-child（2n）{
background-color：＃f8f8f8; }
table tr th {
font-weight：bold;
border：1px solid #cccccc;
margin：0;
padding：6px 13px; }
table tr td {
border：1px solid #cccccc;
margin：0;
padding：6px 13px; }
table tr th：first-child，table tr td：first-child {
margin-top：0; }
table tr th：last-child，table tr td：last-child {
margin-bottom：0; }
tr {
page-break-inside：avoid;
page-break-after：avoid;
}
th {
page-break-inside：avoid;
page-break-after：avoid;
}
p {orphans：5;寡妇：5; page-break-after：avoid; page-break-before：avoid; }
body {
height：auto;
font-family：Helvetica，arial，sans-serif;
font-size：14px;
line-height：1.6;
padding-top：10px;
padding-bottom：10px;
background-color：white;
padding：30px;
}
body> *：first-child {
margin-top：0！important; }
body> *：last-child {
margin-bottom：0！important; }
a {
color：＃4183C4; }
a.absent {
color：＃cc0000; }
a.anchor {
display：block;
padding-left：30px;
margin-left：-30px;
cursor：pointer;
position：absolute;
top：0;
left：0;
bottom：0; }
h1，h2，h3，h4，h5，h6 {
margin：20px 0 10px;
padding：0;
font-weight：bold;
-webkit-font-smoothing：antialiased;
cursor：text;
position：relative; }
body {counter-reset：section;}
h2 {counter-reset：sub-section;}
h4 {counter-reset：detail;}
h3 {counter-reset：composite;}
h5 {counter-reset：sub-detail;}
h1 {
text-align：center;
font-size：1.6em;
margin-bottom：10mm;
}
h2：before {
counter-increment：section;
content：counter（section）。;
}
h3：before {
counter-increment：sub-section;
content：counter（section）。计数器（子部）。
}
h4：before {
counter-increment：composite;
content：counter（section）。计数器（子部分）。计数器（复合）。
}
h5：before {
counter-increment：detail;
content：counter（section）。计数器（子部分）。计数器（复合）。计数器（细节）。
}
h6：before {
counter-increment：sub-detail;
content：counter（section）。计数器（子部分）。计数器（复合）。计数器（细节）。计数器（子细节）。
}
h1：hover a.anchor，h2：hover a.anchor，h3：hover a.anchor，h4：hover a.anchor，h5：hover a。 anchor，h6：hover a.anchor {
text-decoration：none; }
h1 tt，h1 code {
font-size：inherit; }
h2 tt，h2 code {
font-size：inherit; }
h3 tt，h3 code {
font-size：inherit; }
h4 tt，h4 code {
font-size：inherit; }
h5 tt，h5 code {
font-size：inherit; }
h6 tt，h6 code {
font-size：inherit; }
h1 {
font-size：28px;
color：black; }
h2 {
font-size：24px;
border-bottom：1px solid #cccccc;
color：black; }
h3 {
font-size：18px; }
h4 {
font-size：16px; }
h5 {
font-size：14px; }
h6 {
color：＃777777;
font-size：14px; }
/ *
p，blockquote，ul，ol，dl，li，table，pre {
margin：15px 0; }
* /
hr {
border：0 none;
color：#cccccc;
height：4px;
padding：0;
}
body> h2：first-child {
margin-top：0;
padding-top：0; }
body> h1：first-child {
margin-top：0;
padding-top：0; }
body> h1：first-child + h2 {
margin-top：0;
padding-top：0; }
body> h3：first-child，body> h4：first-child，body> h5：first-child，body> h6：first-child {
margin-top：0;
padding-top：0; }
a：first-child h1，a：first-child h2，a：first-child h3，a：first-child h4，a：first-child h5，
margin-top：0;
padding-top：0; }
h1 p，h2 p，h3 p，h4 p，h5 p，h6 p {
margin-top：0; }
li p.first {
display：inline-block; }
li {
margin：0; }
ul，ol {
padding-left：30px; }
ul：first-child，ol：first-child {
margin-top：0; }
dl {
padding：0; }
dl dt {
font-size：14px;
font-weight：bold;
font-style：italic;
padding：0;
margin：15px 0 5px; }
dl dt：first-child {
padding：0; }
dl dt> ：first-child {
margin-top：0; }
dl dt> ：last-child {
margin-bottom：0; }
dl dd {
margin：0 0 15px;
padding：0 15px; }
dl dd> ：first-child {
margin-top：0; }
dl dd> ：last-child {
margin-bottom：0; }
blockquote {
border-left：4px solid #dddddd;
padding：0 15px;
color：＃777777; }
blockquote> ：first-child {
margin-top：0; }
blockquote> ：last-child {
margin-bottom：0; }
< / style>
< / head>
< body>
< h1>复制/粘贴链接用例概述< / h1>
< p>为了在任何可以处理粘贴的HTML剪贴板内容的应用程序中正确处理链接，当< strong>复制< / strong>时，必须提供以下MIME类型数据。命令被触发：< / p>
< p>为了在任何可以处理粘贴的HTML剪贴板内容的应用程序中正确处理链接，当< strong>复制< / strong>时，必须提供以下MIME类型数据。命令被触发：< / p>
< h2>支持的MIME类型< / h2>
< h3>纯文本（文本/纯文本）< / h3>
< p>对于任何简单< strong>复制< / strong>命令由< code> CTRL + C< / code>这个MIME类型将包含用户看到的文本，例如。对象的名称。在特殊< strong>复制链接< / strong>此命令将包含< strong>全局< / strong>对象的测试网址。< / p>
< pre>< code>这是对象名称
< / code>< / pre>
< pre>< code> test：//test.de：1643 / testprod / object / 12/345
< / code>< / pre>
< h3> HTML（text / html）< / h3>
< p>对于所有< strong>复制< / strong>命令。此mime类型将包含< em> html片段< / em> ，其中< code>& lt; a& gt;< / code> - 标签隐藏< em>全局< / em> test-url，对象的名称和工具提示：< / p>
< pre>< code>& lt; a href =test :: //test.de：1643 / testprod / object / 12/345title =这是工具提示& gt;这是一个对象& lt; / a& gt;
< / code>< / pre>
< h3> Uri-List（text / uri-list）< / h3>
< p>在注释行中按对象名称前缀的全局测试网址列表：< / p>
< pre>< code>＃对象1的名称
test：//test.de：1643 / testprod / object / 123/5678
＃对象2
test：// ...
< / code>< / pre>
< p>
< h3> EIS-List（application / test-eis-list）< / h3>
< p>
对应于< strong> local< / strong>的EIS-String列表测试网址。每当在测试中粘贴数据时，首选eis-list mime类型。包含的数据只是eis的列表：< / p>
< pre>< code> / object / 12/345
/ object / 1/26
...
< / code> / pre>
< / p>
< p>
< h2>这是一个标题< / h2>
这是文本
< br>，它不应该有
< br>中断页面
< / p>
< table>
< thead>
< tr>
< th>上下文< / th>
< th>命令< / th>
< th> text / plain< / th>
< th> text / html< / th>
< th> text / uri-list< / th>
< th> eis-list< / th>
< th>说明< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td> 1。树状视图< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong>复制< / strong>< / td>
< td>对象名称< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>文本编辑器粘贴给出对象名称< / td>
< / tr>
< tr>
< td> b）< / td>
< td>< strong>复制链接< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>文本编辑器粘贴提供测试网址< / td>
< / tr>
< tr>
< td> c）< / td>
< td>< strong>复制Create-Link< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>喜欢（b），但链接将打开一个新对象（创建）< / td>
< / tr>
< tr>
< td> 2。导航侧栏< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr> ¥b $ b< td> a）< / td>
< td>< strong>复制< / strong>< / td>
< td>对象名称< / td>
< td>全局HTML链接< / td>
< td> URL< / td>
< td>（本地）EIS如果适用< / td>
< td>导航侧边栏可以包含任何网址，因此如果网址是存储的，则将按原样使用。对于对象e，行为类似于1. a）< / td>
< / tr>
< tr>
< td>对象详细信息视图< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong>复制链接< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>打开对象的普通链接< / td>
< / tr>
< tr>
< td> b）< / td>
< td>< strong>复制版面连结< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>打开对象的链接还包含当前视图的布局设置< / td>
< / tr>
< tr>
< td> 3。报告快速查看< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong>复制链接< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>打开报告的普通链接< / td>
< / tr>
< tr>
< td> b）< / td>
< td>< strong>复制版面连结< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>打开报告的链接还包含当前视图和报告参数值的布局设置。< / td>
< / tr>
< tr>
< td> 4。报表对象< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong>复制链接< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>见3.a）< / td>
< / tr>
< tr>
< td> b）< / td>
< td>< strong>复制链接与版面< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>见3.b）< / td>
< / tr>
< tr>
< td> 5。嵌入式报表工具栏< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong>复制链接< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>见3.a）< / td>
< / tr>
< tr>
< td> b）< / td>
< td>< strong>复制版面连结< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>见3.b）< / td>
< / tr>
< tr>
< td> 1。树状视图< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong> Copy< / strong>< / td>
< td>对象名称< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>文本编辑器粘贴给出对象名称< / td>
< / tr>
< tr>
< td> b）< / td>
< td>< strong>复制链接< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>文本编辑器粘贴提供测试网址< / td>
< / tr>
< tr>
< td> c）< / td>
< td>< strong>复制Create-Link< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>喜欢（b），但链接将打开一个新对象（创建）< / td>
< / tr>
< tr>
< td> 2。导航侧栏< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong>复制< / strong>< / td>
< td>对象名称< / td>
< td>全局HTML链接< / td>
< td> URL< / td>
< td>（本地）EIS如果适用< / td>
< td>导航侧边栏可以包含任何网址，因此如果网址是存储的，则将按原样使用。对于对象e，行为类似于1. a）< / td>
< / tr>
< tr>
< td>对象详情视图< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong>复制链接< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>打开对象的普通链接< / td>
< / tr>
< tr>
< td> b）< / td>
< td>< strong>复制版面连结< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全球测试网址< / td>
< td>（Local）EIS< / td>
< td>打开对象的链接还包含当前视图的布局设置< / td>
< / tr>
< tr>
< td> 3。报告快速查看< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong>复制链接< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>打开报告的普通链接< / td>
< / tr>
< tr>
< td> b）< / td>
< td>< strong>复制版面连结< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全球测试网址< / td>
< td>（Local）EIS< / td>
< td>打开报告的链接还包含当前视图和报告参数值的布局设置。< / td>
< / tr>
< tr>
< td> 4。报表对象< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong>复制链接< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>见3.a）< / td>
< / tr>
< tr>
< td> b）< / td>
< td>< strong>复制链接与版面< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>见3.b）< / td>
< / tr>
< tr>
< td> 5。嵌入式报表工具栏< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> a）< / td>
< td>< strong>复制链接< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>见3.a）< / td>
< / tr>
< tr>
< td> b）< / td>
< td>< strong>复制版面连结< / strong>< / td>
< td>全局测试网址< / td>
< td>全局HTML链接< / td>
< td>全局测试网址< / td>
< td>（Local）EIS< / td>
< td>见3.b）< / td>
< / tr>
< / tbody>
< / table>
< h2>其他相关问题< / h2>
< h3>链接粘贴到MS Word中时使用不一致的字体和字体大小< / h3>
< ul>
< li>如果& lsquo;复制’& lsquo;复制对象网址& rsquo;或& lsquo;复制Create-Object-Url& rsquo;在树视图的上下文菜单中使用并且链接通过Ctrl + V粘贴到MS Word中，字体& lsquo; MS Shell Dlg 2& rsquo;使用尺寸8,5。< / li>
< li>从导航栏复制的链接也用字体& lsquo; MS Shell Dlg 2& rsquo;大小为8,5进入MS Word< / li>
< li>预期：将链接粘贴到Word Word中，并使用在Word模板中作为标准使用的字体。< / li>
< / ul>
< h3>重命名‘复制对象网址& rsquo; & lsquo;复制Create-Object-URL& rsquo;< / h3>
< p>结构树中对象的上下文菜单中的两个命令都应重命名以保持一致性。< / p>
< ul>
< li>& lsquo;复制对象网址& rsquo;应重命名为< lsquo;复制对象链接< / li>
< li>& lsquo;复制Create-Object-Url& rsquo;应重命名为& lsquo;复制Create-Object-Link& rsquo;< / li>
< / ul>
< h2>其他备注< / h2>
< p>德语翻译也必须重命名。< / p>
< h1>复制/粘贴链接用例概述< / h1>
< p>为了在任何可以处理粘贴的HTML剪贴板内容的应用程序中正确处理链接，当< strong>复制< / strong>时，必须提供以下MIME类型数据。命令被触发：< / p>
< h2>支持的MIME类型< / h2>
< h3>纯文本（文本/纯文本）< / h3>
< p>对于任何简单< strong>复制< / strong>命令由< code> CTRL + C< / code>这个MIME类型将包含用户看到的文本，例如。对象的名称。在特殊< strong>复制链接< / strong>此命令将包含< strong>全局< / strong>对象的测试网址。< / p>
< pre>< code>这是对象名称
< / code>< / pre>
< p>或< / p>
< pre>< code> test：//test.de：1643 / testprod / object / 12/345
< / code>< / pre>
< h3> HTML（text / html）< / h3>
< p>对于所有< strong>复制< / strong>命令。此mime类型将包含< em> html片段< / em> ，其中< code>& lt; a& gt;< / code> - 标签隐藏< em>全局< / em> test-url，对象的名称和工具提示：< / p>
< pre>< code>& lt; a href =test :: //test.de：1643 / testprod / object / 12/345title =这是工具提示& gt;这是一个对象& lt; / a& gt;
< / code>< / pre>
< h3> Uri-List（text / uri-list）< / h3>
< p>在注释行中按对象名称前缀的全局测试网址列表：< / p>
< pre>< code>＃对象1的名称
test：//test.de：1643 / testprod / object / 123/5678
＃对象2
test：// ...
< / code>< / pre>
< h3> EIS-List（application / test-eis-list）< / h3>
< p>对应于< strong> local< / strong>的EIS-String列表。测试网址。每当在测试中粘贴数据时，首选eis-list mime类型。包含的数据只是eis的列表：< / p>
< pre>< code> / object / 12/345
/ object / 1/26
...
< / code> / pre>
< / body>
< / html>
我使用IE10作为Chrome和Firefox实际上有一些问题与 page-break - * 和孤儿/寡妇
解决方案
应用于表的页面中断避免告诉格式化引擎不会破坏表中的页面。你应该注意，大多数格式化程序不会后退，并试图再次做事情，他们是前进引擎。
避免在整个表上设置。该表大约有2.5个物理页长。
首先，格式化程序尝试将其放在当前页面中。当然它不能，因为它比一个页面更长。所以它会抛出那个空白页并再次尝试。再次，当然不能，因为它不适合在那个页面。
所以它创建一个新的空白页，放置标题，并开始放下行。但在行上有另一个规则 - page-break-after =avoid。所以它不能打破行后的页面，所以它开始把行在内存和... poof。当然，他们不适合在页面上，因为有更多的行比页面是长的。
所以它放弃，然后将您的表放在下一页，
您已经创建了一个巨大的过约束的规则集。
这不清楚你真正想要什么，因为你不能说 - 我不想要一个表破坏其内部，我想要所有的行保持在一起
我也注意到这有点吓人：
p {orphans：5;寡妇：5; page-break-after：avoid; page-break-before：avoid; }
这意味着在任何p标签中至少保持10行，永远不会在它之前和之后分页。所以字面上你说，如果你有一个10 p标签，没有超过10行（5孤儿和5寡妇），你会再次达到相同的条件。
现在，您的评论如下：
但这是我们必须的（我的公司）。表头必须在所有页面中可见。
您必须在放置表格的所有页面上页面。和将表保持在一起的约束（page-break-inside =avoidon table）或将表中的所有行保留在一起（page-break-after =avoidon row）与无关那。表标题将显示在表所在的每个页面上。只要它们在表头中。
删除所有这些约束 - 您会看到表标题很好，没有空白页。所以删除：
- page-break-inside =避免在表上
- （我不会在p上有这组规则）
< -after =避免在tr
I cannot understand why there's a blank page + a page with only the table header in this document.
The rest is OK but I cannot get rid of these 2 pages.
This is the full HTML code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style media="print" type="text/css">
h1:not(:first-child) {
page-break-before: always;
}
table {
page-break-before : avoid;
page-break-inside : avoid;
padding: 0;border-collapse: collapse; }
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0; }
table tr:nth-child(2n) {
background-color: #f8f8f8; }
table tr th {
font-weight: bold;
border: 1px solid #cccccc;
margin: 0;
padding: 6px 13px; }
table tr td {
border: 1px solid #cccccc;
margin: 0;
padding: 6px 13px; }
table tr th :first-child, table tr td :first-child {
margin-top: 0; }
table tr th :last-child, table tr td :last-child {
margin-bottom: 0; }
tr {
page-break-inside: avoid;
page-break-after : avoid;
}
th {
page-break-inside: avoid;
page-break-after : avoid;
}
p { orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid; }
body {
height: auto;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
line-height: 1.6;
padding-top: 10px;
padding-bottom: 10px;
background-color: white;
padding: 30px;
}
body > *:first-child {
margin-top: 0 !important; }
body > *:last-child {
margin-bottom: 0 !important; }
a {
color: #4183C4; }
a.absent {
color: #cc0000; }
a.anchor {
display: block;
padding-left: 30px;
margin-left: -30px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0; }
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: text;
position: relative; }
body{counter-reset: section;}
h2{counter-reset: sub-section;}
h4{counter-reset: detail;}
h3{counter-reset: composite;}
h5{counter-reset: sub-detail;}
h1{
text-align:center;
font-size:1.6em;
margin-bottom: 10mm;
}
h2:before{
counter-increment: section;
content: counter(section) ". ";
}
h3:before{
counter-increment: sub-section;
content: counter(section) "." counter(sub-section) ". ";
}
h4:before{
counter-increment: composite;
content: counter(section) "." counter(sub-section) "." counter(composite) ". ";
}
h5:before{
counter-increment: detail;
content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) ". ";
}
h6:before{
counter-increment: sub-detail;
content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) "." counter(sub-detail) ". ";
}
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
text-decoration: none; }
h1 tt, h1 code {
font-size: inherit; }
h2 tt, h2 code {
font-size: inherit; }
h3 tt, h3 code {
font-size: inherit; }
h4 tt, h4 code {
font-size: inherit; }
h5 tt, h5 code {
font-size: inherit; }
h6 tt, h6 code {
font-size: inherit; }
h1 {
font-size: 28px;
color: black; }
h2 {
font-size: 24px;
border-bottom: 1px solid #cccccc;
color: black; }
h3 {
font-size: 18px; }
h4 {
font-size: 16px; }
h5 {
font-size: 14px; }
h6 {
color: #777777;
font-size: 14px; }
/*
p, blockquote, ul, ol, dl, li, table, pre {
margin: 15px 0; }
*/
hr {
border: 0 none;
color: #cccccc;
height: 4px;
padding: 0;
}
body > h2:first-child {
margin-top: 0;
padding-top: 0; }
body > h1:first-child {
margin-top: 0;
padding-top: 0; }
body > h1:first-child + h2 {
margin-top: 0;
padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
margin-top: 0;
padding-top: 0; }
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0; }
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
margin-top: 0; }
li p.first {
display: inline-block; }
li {
margin: 0; }
ul, ol {
padding-left: 30px; }
ul :first-child, ol :first-child {
margin-top: 0; }
dl {
padding: 0; }
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px; }
dl dt:first-child {
padding: 0; }
dl dt > :first-child {
margin-top: 0; }
dl dt > :last-child {
margin-bottom: 0; }
dl dd {
margin: 0 0 15px;
padding: 0 15px; }
dl dd > :first-child {
margin-top: 0; }
dl dd > :last-child {
margin-bottom: 0; }
blockquote {
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777; }
blockquote > :first-child {
margin-top: 0; }
blockquote > :last-child {
margin-bottom: 0; }
</style>
</head>
<body>
<h1>Copy/Paste Link Use Case Overview</h1>
<p>In order to handle links correctly in any applications that can handle HTML clipboard content on paste, the following mime type data has to be provided when a <strong>Copy</strong> command is triggered:</p>
<p>In order to handle links correctly in any applications that can handle HTML clipboard content on paste, the following mime type data has to be provided when a <strong>Copy</strong> command is triggered:</p>
<h2>Supported Mime Types</h2>
<h3>Plain Text (text/plain)</h3>
<p>For any simple <strong>Copy</strong> command as triggered by <code>CTRL+C</code> this mime type will contain the text as seen by the user, e.g. the name of the object. In case of a special <strong>Copy Link</strong> Command this will contain the <strong>global</strong> test-url of the object.</p>
<pre><code>This is the object name
</code></pre>
<pre><code>test://test.de:1643/testprod/object/12/345
</code></pre>
<h3>HTML (text/html)</h3>
<p>This behaves very similar for all <strong>Copy</strong> commands. This mime type will contain a <em>html fragment</em> with an <code><a></code>-tag brearing the <em>global</em> test-url, the name of the object and the tooltip:</p>
<pre><code><a href="test:://test.de:1643/testprod/object/12/345" title="This is the tooltip">This is an object</a>
</code></pre>
<h3>Uri-List (text/uri-list)</h3>
<p>A list of global test-urls prependend by the object name in a comment line:</p>
<pre><code># Name of object 1
test://test.de:1643/testprod/object/123/5678
# Object 2
test://...
</code></pre>
<p>
<h3>EIS-List (application/test-eis-list)</h3>
<p>
A list of EIS-String that correspond to <strong>local</strong> test-urls. Whenever data is pasted inside test, the eis-list mime type is preferred. The contained data is just a list of eis:</p>
<pre><code>/object/12/345
/object/1/26
...
</code></pre>
</p>
<p>
<h2>This is a title</h2>
This is the text
<br>that should not have a
<br> break page
</p>
<table>
<thead>
<tr>
<th>Context </th>
<th> Command </th>
<th> text/plain </th>
<th> text/html </th>
<th> text/uri-list </th>
<th> eis-list </th>
<th> Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. Tree View</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy</strong></td>
<td>Object Name</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>Text Editor Paste gives in object name</td>
</tr>
<tr>
<td>b) </td>
<td><strong>Copy Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>Text Editor Paste gives test-URL</td>
</tr>
<tr>
<td>c) </td>
<td><strong>Copy Create-Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td> Like (b) but link will open a new object (create)</td>
</tr>
<tr>
<td>2. Navigation Sidebar</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy</strong></td>
<td>Object Name</td>
<td>Global HTML Link</td>
<td>URL</td>
<td>(Local) EIS if appropriate</td>
<td>The navigation sidebar can contain any url so if an URL is store this will be used as is. For object eis the behavior is like 1. a)</td>
</tr>
<tr>
<td>Object Detail View</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>Plain link to open the object</td>
</tr>
<tr>
<td>b) </td>
<td><strong>Copy Link with Layout</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>The link to open the object also contains layout settings of the current view</td>
</tr>
<tr>
<td>3. Report Quick View</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>Plain link to open the report</td>
</tr>
<tr>
<td>b) </td>
<td><strong>Copy Link with Layout</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>The link to open the report also contains layout settings of the current view and report parameter values.</td>
</tr>
<tr>
<td>4. Report Object</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>see 3.a)</td>
</tr>
<tr>
<td>b) </td>
<td><strong>Copy Link with Layout</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>see 3.b)</td>
</tr>
<tr>
<td>5. Embedded Report Toolbar</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>see 3.a)</td>
</tr>
<tr>
<td>b) </td>
<td><strong>Copy Link with Layout</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>see 3.b)</td>
</tr>
<tr>
<td>1. Tree View</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy</strong></td>
<td>Object Name</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>Text Editor Paste gives in object name</td>
</tr>
<tr>
<td>b) </td>
<td><strong>Copy Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>Text Editor Paste gives test-URL</td>
</tr>
<tr>
<td>c) </td>
<td><strong>Copy Create-Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td> Like (b) but link will open a new object (create)</td>
</tr>
<tr>
<td>2. Navigation Sidebar</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy</strong></td>
<td>Object Name</td>
<td>Global HTML Link</td>
<td>URL</td>
<td>(Local) EIS if appropriate</td>
<td>The navigation sidebar can contain any url so if an URL is store this will be used as is. For object eis the behavior is like 1. a)</td>
</tr>
<tr>
<td>Object Detail View</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>Plain link to open the object</td>
</tr>
<tr>
<td>b) </td>
<td><strong>Copy Link with Layout</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>The link to open the object also contains layout settings of the current view</td>
</tr>
<tr>
<td>3. Report Quick View</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>Plain link to open the report</td>
</tr>
<tr>
<td>b) </td>
<td><strong>Copy Link with Layout</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>The link to open the report also contains layout settings of the current view and report parameter values.</td>
</tr>
<tr>
<td>4. Report Object</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>see 3.a)</td>
</tr>
<tr>
<td>b) </td>
<td><strong>Copy Link with Layout</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>see 3.b)</td>
</tr>
<tr>
<td>5. Embedded Report Toolbar</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a) </td>
<td><strong>Copy Link</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>see 3.a)</td>
</tr>
<tr>
<td>b) </td>
<td><strong>Copy Link with Layout</strong></td>
<td>Global test-URL</td>
<td>Global HTML Link</td>
<td>Global test-URL</td>
<td>(Local) EIS</td>
<td>see 3.b)</td>
</tr>
</tbody>
</table>
<h2>Other related issues</h2>
<h3>Inconsistent Fonts and Font Sizes are used when links are pasted into MS Word</h3>
<ul>
<li>If ‘Copy’, ‘Copy Object Url’ or ‘Copy Create-Object-Url’ in the context menu of the tree view is used and the link is pasted into MS Word by Ctrl+V, the font ‘MS Shell Dlg 2’ with size 8,5 is used.</li>
<li>Links that are copied from the navigation bar are also pasted with font ‘MS Shell Dlg 2’ with size 8,5 into MS Word</li>
<li>Expected: The link is pasted into MS Word with the font that is used as standard in the Word template.</li>
</ul>
<h3>Rename ‘Copy Object Url’ and ‘Copy Create-Object-URL’</h3>
<p>Both commands in the context menu for objects in the structure tree should be renamed for consistency.</p>
<ul>
<li>‘Copy Object Url’ should be renamed to ‘Copy Object Link’</li>
<li>‘Copy Create-Object-Url’ should be renamed to ‘Copy Create-Object-Link’</li>
</ul>
<h2>Additional Notes</h2>
<p>The German translations must also be renamed.</p>
<h1>Copy/Paste Link Use Case Overview</h1>
<p>In order to handle links correctly in any applications that can handle HTML clipboard content on paste, the following mime type data has to be provided when a <strong>Copy</strong> command is triggered:</p>
<h2>Supported Mime Types</h2>
<h3>Plain Text (text/plain)</h3>
<p>For any simple <strong>Copy</strong> command as triggered by <code>CTRL+C</code> this mime type will contain the text as seen by the user, e.g. the name of the object. In case of a special <strong>Copy Link</strong> Command this will contain the <strong>global</strong> test-url of the object.</p>
<pre><code>This is the object name
</code></pre>
<p>or</p>
<pre><code>test://test.de:1643/testprod/object/12/345
</code></pre>
<h3>HTML (text/html)</h3>
<p>This behaves very similar for all <strong>Copy</strong> commands. This mime type will contain a <em>html fragment</em> with an <code><a></code>-tag brearing the <em>global</em> test-url, the name of the object and the tooltip:</p>
<pre><code><a href="test:://test.de:1643/testprod/object/12/345" title="This is the tooltip">This is an object</a>
</code></pre>
<h3>Uri-List (text/uri-list)</h3>
<p>A list of global test-urls prependend by the object name in a comment line:</p>
<pre><code># Name of object 1
test://test.de:1643/testprod/object/123/5678
# Object 2
test://...
</code></pre>
<h3>EIS-List (application/test-eis-list)</h3>
<p>A list of EIS-String that correspond to <strong>local</strong> test-urls. Whenever data is pasted inside test, the eis-list mime type is preferred. The contained data is just a list of eis:</p>
<pre><code>/object/12/345
/object/1/26
...
</code></pre>
</body>
</html>
I use IE10 as Chrome and Firefox actually have some problems with page-break-* and orphans / widows
解决方案
The page-break-avoid applied to the table tells the formatting engine to not break the page inside the table. You should note that most formatters do not "go backward" and attempt to do things again, they are "go forward" engines.
So, you have page-break-avoid set on the whole table. That table is about 2.5 physical pages long.
First, the formatter tries to fit it in the current page. Of course it can't as it is longer than a page. So it throws that blank page and tries again. And again, of course it can't as it does not fit on that page.
So it creates a new blank page, places the header and starts to put down rows. BUT you have another rule -- page-break-after="avoid" on rows. So it can't break the page after the row so it starts putting rows in memory and ... poof. Of course they do not fit on the page as there are more rows than the page is long.
So it gives up and then places your table on that next page and breaks that condition.
You have created a hugely over-contrained set of rules.
It's not clear what you actually want as you cannot say -- I do not want a table to break inside of it and I want all the rows kept together (those are both of the rules you stated) AND then give it a table that is 2.5 pages long.
I would also note that this is a bit scary:
p { orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid; }
What that means is keep at least 10 lines together in any p tag, never break a page before it and never after it. So literally you are saying that if you had 10 p tags in a row, none with more than 10 lines (5 orphans and 5 widows) you will hit the same condition again. It could not break inside it, before it or after it.
Now, your comment below:
But this is a must for us (my company). The table header must be visible in all the pages.
You must mean on all pages on which the table is placed, not all the pages. And the constraints to keep a table all together (page-break-inside="avoid" on table) or to keep all the rows in a table together (page-break-after="avoid" on row) have nothing to do with that. Table headers will appear on each page the table is on. As long as they are in a table-header.
Removing all those constraints -- you see the table headers are fine and no blank pages. So remove:
- page-break-inside="avoid" on table
- page-break-after="avoid" on tr
- (and I would never have that set of rules on p)
这篇关于HTML / CSS：打印表时为空页+只有标题页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
