HTML / CSS: blank page + only page title when printing table
I can't figure out why there is a blank page + a page with only the table title in this document.
The rest is ok, but I cannot get rid of those 2 pages.
This is the complete 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 am using IE10 as Chrome and Firefox do have some problems with page-break-*
andorphans / widows
+3
source to share
1 answer
When referring to a table used in a table, the formatting engine does not split the page within the table. You should notice that most formatters don't go backward and try to do something else, they go forward.
So you have a page break set on your entire table. This table is about 2.5 physical pages long.
First, the formatter tries to install it on the current page. Of course it cannot, since it is longer than a page. So he throws out this blank page and tries again. And again, of course, he can't, since he doesn't fit on this page.
So it creates a new blank page, puts in the header, and starts putting in lines. BUT you have another rule - page-break-after="avoid"
for strings. So it can't break the page after the line, so it starts putting lines into memory and ... poof. Of course, they do not fit on the page, since there are more lines than the page.
So, it refuses and then puts your table on the next page and violates that condition.
You have created an extremely complex set of rules.
It is not clear what you actually want, as you cannot tell - I do not want the table to be split in it and I want all the rows to be contained together (these are both the rules you provided) and then give table 2.5 pages long.
I would also like to point out that this is a little scary:
p { orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid; }
What this means is, keep at least 10 lines together in any p tag, never break the page before or after it. So literally you are saying that if you had 10 p-tags in a row, none of them were more than 10 lines (5 orphans and 5 widows), you would end up in the same state again. He could not break inside him, in front of him or after him.
Now, your comment below:
But this is necessary for us (my company). The table header must be visible on all pages.
You must understand on all pages that contain the table, not on all pages. And the constraints on keeping the table together (page-break-inside = "avoid" in the table) or keeping all the rows in the table together (page-break-after = "avoid" in the row) have nothing to do with that. Table headers will appear on every page the table is on. While they are in the header of the table.
Removing all of these restrictions - you can see that the table headers are fine and have no blank pages. So remove:
-
page-break-inside="avoid"
ontable
-
page-break-after="avoid"
ontr
- (and I would never have such a set of rules on
p
)
+5
source to share