HTML / CSS：打印表时空页+唯一页眉页
我无法理解为什么会有一个空白页面+一个只有本文档中的表格标题的页面。
其余的都没问题，但我无法摆脱这两页。
这是完整的HTML代码：
<!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>
我使用IE10作为Chrome和Firefox实际上在使用page-break-*和orphans / widows
1 个答案:
答案 0 :(得分：5)
应用于表的page-break-avoid告诉格式化引擎不要破坏表中的页面。你应该注意到，大多数格式化程序都没有“后退”并尝试再做一次，它们是“前进”引擎。
所以，你在整个表上设置了page-break-avoid。该表长约2.5个实体页面。
首先，格式化程序尝试将其放入当前页面。当然它不能因为它比页面长。所以它抛出空白页面并再次尝试。而且，当然它不能，因为它不适合该页面。
因此它会创建一个新的空白页面，放置标题并开始放下行。但是你有另一条规则 - 行page-break-after="avoid"。所以它不能在行之后打破页面，所以它开始在内存中放置行和... poof。当然它们不适合页面，因为行数多于页面的长度。
所以它放弃然后把你的桌子放在下一页并打破这个条件。
你创造了一套非常严格的规则。
目前还不清楚你真正想要的是什么，因为你不能说 - 我不希望桌子在里面打破，我希望所有的行保持在一起（这些都是你说的规则）然后给它一个表格长2.5页。
我还会注意到这有点可怕：
p { orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid; }
这意味着在任何p标签中保持至少10行，永远不要在它之前打破页面而从不打破它。所以从字面上看，你说如果你连续有10个p标签，没有超过10行（5个孤儿和5个寡妇），你将再次达到相同的条件。在它之前或之后它无法在它内部破坏。
现在，您的评论如下：
但这对我们（我的公司）来说是必须的。表头必须在所有页面中都可见。
您必须在放置桌子的所有页面上，而不是所有页面。并且将表保持在一起的约束（page-break-inside =“避免”在表上）或将表中的所有行保持在一起（page-break-after =“避免”在行上）与之无关那。表格标题将显示在表格所在的每个页面上。只要它们在表头中。
删除所有这些限制 - 您会看到表格标题很好而且没有空白页面。所以删除：
-
page-break-inside="avoid"table -
page-break-after="avoid"tr - （我永远不会在
p） 上有这套规则
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？