Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

html

css

printing

I cannot understand why there's a blank page + a page with only the table header in this document.

enter image description here

The rest is OK but I cannot get rid of these 2 pages.

This is the full 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>&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>

I use IE10 as Chrome and Firefox actually have some problems with page-break-* and orphans / widows

like image 386
marco Avatar asked Jun 10 '15 12:06

marco

People also ask

Can I force a page-break in HTML printing?

We can add a page break tag with style "page-break-after: always" at the point where we want to introduce the pagebreak in the html page.

How do you deal with page breaks when printing large in HTML?

Solution with the CSS page-break-inside property Read our snippet if you need to print an HTML table with many rows over multiple pages. For that purpose, you'll need the CSS page-break-inside property, which helps to specify how the document should behave when printed.

1 Answers

The page-break-avoid applied to the table tells the formatting engine to not break the page inside the table. You should note that most formatters do not "go backward" and attempt to do things again, they are "go forward" engines.

So, you have page-break-avoid set on the whole table. That table is about 2.5 physical pages long.

First, the formatter tries to fit it in the current page. Of course it can't as it is longer than a page. So it throws that blank page and tries again. And again, of course it can't as it does not fit on that page.

So it creates a new blank page, places the header and starts to put down rows. BUT you have another rule -- page-break-after="avoid" on rows. So it can't break the page after the row so it starts putting rows in memory and ... poof. Of course they do not fit on the page as there are more rows than the page is long.

So it gives up and then places your table on that next page and breaks that condition.

You have created a hugely over-contrained set of rules.

It's not clear what you actually want as you cannot say -- I do not want a table to break inside of it and I want all the rows kept together (those are both of the rules you stated) AND then give it a table that is 2.5 pages long.

I would also note that this is a bit scary:

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

What that means is keep at least 10 lines together in any p tag, never break a page before it and never after it. So literally you are saying that if you had 10 p tags in a row, none with more than 10 lines (5 orphans and 5 widows) you will hit the same condition again. It could not break inside it, before it or after it.

Now, your comment below:

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

You must mean on all pages on which the table is placed, not all the pages. And the constraints to keep a table all together (page-break-inside="avoid" on table) or to keep all the rows in a table together (page-break-after="avoid" on row) have nothing to do with that. Table headers will appear on each page the table is on. As long as they are in a table-header.

Removing all those constraints -- you see the table headers are fine and no blank pages. So remove:

  • page-break-inside="avoid" on table
  • page-break-after="avoid" on tr
  • (and I would never have that set of rules on p)

enter image description here

like image 100
Kevin Brown Avatar answered Nov 15 '22 03:11

Kevin Brown
Sign in to Comment

Related questions

Using Bootstrap "Collapse" on radio buttons to show/hide content (NO JS)
How define the img src path in MVC
HTML Reader from PHPWord does't work with tables?
How am I supposed to use index.html?
Simplistic header for a minimal website - trouble with position
getComputedStyle: wait for external style sheets?
if any Div is empty do something
div height at 100% but there is space on top and/or bottom still
How to create dropdown for <li> using bootstrap
Why Are My Media Query's Instructions not Honored 100% On Some Devices
How does one draw a box around some sibling HTML elements?
Why does svg <use xlink:href="#"/> referencing an element with clip-path not work?
Example of use IF in PHP
Displaying a nested array in an HTML table
CSS: search box will be automatically resize base on windows size using Flexbox
Put image in div element and keep image ratio
how to make an image inside div fill the entire div?
Open a new tab and download a PDF at the sametime
HTML5: Meta charset before title?
VueJS - model binding not working with inputs using jQuery plugins

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!