gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:42:23 24 4
gpt4 key购买 nike

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

enter image description here

其余的还可以,但我无法摆脱这 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 方面存在一些问题

最佳答案

应用于表格的分页避免告诉格式化引擎不要在表格内分页。您应该注意,大多数格式化程序不会“倒退”并尝试再次做事,它们是“前进”的引擎。

因此,您在整个表格上设置了 page-break-avoid。该表大约有 2.5 个物理页面长。

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

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

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

您已经创建了一套非常过度约束的规则。

不清楚你真正想要什么,因为你不能说——我不希望表格在其中中断,我希望所有行都放在一起(这些都是你声明的规则),然后给它一个2.5 页长的表格。

我还要注意到这有点可怕:

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

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

现在,您的评论如下:

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

你的意思一定是在放置表格的所有页面上,而不是所有页面上。将表放在一起(page-break-inside="avoid"on table)或将表中的所有行放在一起(page-break-after="avoid"on row)的约束与那。表格标题将出现在表格所在的每一页上。只要它们在表头中。

删除所有这些限制——您会看到表格标题很好,没有空白页。所以删除:

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

enter image description here

关于HTML/CSS : empty page + only header page when printing table,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30756982/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com