HTML/CSS:打印表时空页+唯一页眉页

Question

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>&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>

Run Code Online (Sandbox Code Playgroud)

我使用IE10作为Chrome和Firefox实际上有一些问题page-break-*和orphans / widows

Answer 1

Kev*_*own 6

应用于表的分页符避免告诉格式化引擎不要破坏表中的页面.你应该注意到,大多数格式化程序不会"后退"并尝试再做一些事情,它们是"前进"引擎.

因此,您可以在整个表上设置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; }

Run Code Online (Sandbox Code Playgroud)

这意味着在任何p标签中保持至少10行,永远不要在它之前打破页面而从不打破它.所以从字面上看,你说如果你连续有10个p标签,没有超过10行(5个孤儿和5个寡妇),你将再次达到相同的条件.在它之前或之后它无法在它内部破坏.

现在,您的评论如下:

但这对我们(我的公司)来说是必须的.表头必须在所有页面中都可见.

您必须在放置表格的所有页面上表示,而不是所有页面.并且将表保持在一起的约束(page-break-inside ="避免"在表上)或将表中的所有行保持在一起(page-break-after ="避免"在行上)与之无关那.表格标题将显示在表格所在的每个页面上.只要它们在表头中.

删除所有这些约束 - 您看到表头很好,没有空白页.删除:

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

在此输入图像描述

归档时间：	10 年，7 月前
查看次数：	2048 次
最近记录：	8 年，1 月前