HTML/CSS: 空白页 + 打印时只有 header 页 table

Question

我不明白为什么这个文档中有一个空白页+一个只有table header的页面。

其余的还可以，但我无法摆脱这 2 页。

这是完整的 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>&lt;a&gt;</code>-tag brearing the <em>global</em> test-url, the name of the object and the tooltip:</p>

<pre><code>&lt;a href="test:://test.de:1643/testprod/object/12/345" title="This is the tooltip"&gt;This is an object&lt;/a&gt;
</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 &lsquo;Copy&rsquo;, &lsquo;Copy Object Url&rsquo; or &lsquo;Copy Create-Object-Url&rsquo; in the context menu of the tree view is used and the link is pasted into MS Word by Ctrl+V, the font &lsquo;MS Shell Dlg 2&rsquo; with size 8,5 is used.</li>
<li>Links that are copied from the navigation bar are also pasted with font &lsquo;MS Shell Dlg 2&rsquo; 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 &lsquo;Copy Object Url&rsquo; and &lsquo;Copy Create-Object-URL&rsquo;</h3>

<p>Both commands in the context menu for objects in the structure tree should be renamed for consistency.</p>

<ul>
<li>&lsquo;Copy Object Url&rsquo; should be renamed to &lsquo;Copy Object Link&rsquo;</li>
<li>&lsquo;Copy Create-Object-Url&rsquo; should be renamed to &lsquo;Copy Create-Object-Link&rsquo;</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>&lt;a&gt;</code>-tag brearing the <em>global</em> test-url, the name of the object and the tooltip:</p>

<pre><code>&lt;a href="test:://test.de:1643/testprod/object/12/345" title="This is the tooltip"&gt;This is an object&lt;/a&gt;
</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

方面存在一些问题

Answer 1

应用于 table 的 page-break-avoid 告诉格式化引擎不要在 table 内破坏页面。您应该注意，大多数格式化程序不会 "go backward" 并尝试再次执行操作，它们是 "go forward" 引擎。

因此，您的 page-break-avoid 总体设置为 table。 table 大约有 2.5 个物理页长。

首先，格式化程序会尝试使其适合当前页面。当然不能，因为它比一页长。所以它抛出那个空白页并重试。再一次，当然不能，因为它不适合那个页面。

所以它创建一个新的空白页，放置 header 并开始放下行。但是您还有另一条规则 - page-break-after="avoid" 行。所以它不能在行后分页，所以它开始将行放入内存中……噗。当然，它们放不下页面，因为行数超过了页面长度。

因此它放弃，然后将您的 table 放在下一页并打破该条件。

您已经创建了一套庞大的 over-contrained 规则。

不清楚你真正想要什么，因为你不能说——我不希望 table 打破它的内部，我希望所有行保持在一起（这些都是你声明的规则) 然后给它一个 2.5 页长的 table。

我还要注意这有点可怕：

p { orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid; }

这意味着在任何 p 标签中至少保持 10 行在一起，永远不要在它之前和之后分页。所以从字面上看，你是说如果你连续有 10 个 p 标签，none 超过 10 行（5 个孤儿和 5 个寡妇），你将再次遇到相同的情况。在它之前或之后它都无法在它内部破裂。

现在，您的评论如下：

But this is a must for us (my company). The table header must be visible in all the pages.

您的意思必须是在放置 table 的所有页面上，而不是所有页面。以及将 table 保持在一起的约束（table 上的 page-break-inside="avoid"）或将 table 中的所有行保持在一起（page-break-after="avoid" 行）与此无关。 Table header 将出现在 table 所在的每个页面上。只要他们在 table-header 中。

删除所有这些限制 - 您会看到 table header 很好，没有空白页。所以删除：

page-break-inside="avoid" 在 table
page-break-after="avoid" 在 tr
（我永远不会在 p 上有那套规则）

HTML/CSS: 空白页 + 打印时只有 header 页 table

HTML/CSS: empty page + only header page when printing table

html

css

printing