HTML/CSS: empty page + only header page when printing table -
i cannot understand why there's blank page + page table header in document.
the rest ok cannot rid of these 2 pages.
this 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; } { 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 handle links correctly in applications can handle html clipboard content on paste, following mime type data has provided when <strong>copy</strong> command triggered:</p> <p>in order handle links correctly in applications can handle html clipboard content on paste, following mime type data has provided when <strong>copy</strong> command triggered:</p> <h2>supported mime types</h2> <h3>plain text (text/plain)</h3> <p>for simple <strong>copy</strong> command triggered <code>ctrl+c</code> mime type contain text seen user, e.g. name of object. in case of special <strong>copy link</strong> command contain <strong>global</strong> test-url of object.</p> <pre><code>this object name </code></pre> <pre><code>test://test.de:1643/testprod/object/12/345 </code></pre> <h3>html (text/html)</h3> <p>this behaves similar <strong>copy</strong> commands. mime type contain <em>html fragment</em> <code><a></code>-tag brearing <em>global</em> test-url, name of object , tooltip:</p> <pre><code><a href="test:://test.de:1643/testprod/object/12/345" title="this tooltip">this object</a> </code></pre> <h3>uri-list (text/uri-list)</h3> <p>a list of global test-urls prependend object name in 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> list of eis-string correspond <strong>local</strong> test-urls. whenever data pasted inside test, eis-list mime type preferred. contained data list of eis:</p> <pre><code>/object/12/345 /object/1/26 ... </code></pre> </p> <p> <h2>this title</h2> text <br>that should not have <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> (b) link open 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 url if url store used is. object eis behavior 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 open object</td> </tr> <tr> <td>b) </td> <td><strong>copy link 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 open object contains layout settings of 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 open report</td> </tr> <tr> <td>b) </td> <td><strong>copy link 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 open report contains layout settings of current view , 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 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 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> (b) link open 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 url if url store used is. object eis behavior 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 open object</td> </tr> <tr> <td>b) </td> <td><strong>copy link 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 open object contains layout settings of 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 open report</td> </tr> <tr> <td>b) </td> <td><strong>copy link 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 open report contains layout settings of current view , 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 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 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 , font sizes used when links pasted ms word</h3> <ul> <li>if ‘copy’, ‘copy object url’ or ‘copy create-object-url’ in context menu of tree view used , link pasted ms word ctrl+v, font ‘ms shell dlg 2’ size 8,5 used.</li> <li>links copied navigation bar pasted font ‘ms shell dlg 2’ size 8,5 ms word</li> <li>expected: link pasted ms word font used standard in word template.</li> </ul> <h3>rename ‘copy object url’ , ‘copy create-object-url’</h3> <p>both commands in context menu objects in structure tree should renamed consistency.</p> <ul> <li>‘copy object url’ should renamed ‘copy object link’</li> <li>‘copy create-object-url’ should renamed ‘copy create-object-link’</li> </ul> <h2>additional notes</h2> <p>the german translations must renamed.</p> <h1>copy/paste link use case overview</h1> <p>in order handle links correctly in applications can handle html clipboard content on paste, following mime type data has provided when <strong>copy</strong> command triggered:</p> <h2>supported mime types</h2> <h3>plain text (text/plain)</h3> <p>for simple <strong>copy</strong> command triggered <code>ctrl+c</code> mime type contain text seen user, e.g. name of object. in case of special <strong>copy link</strong> command contain <strong>global</strong> test-url of object.</p> <pre><code>this 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 similar <strong>copy</strong> commands. mime type contain <em>html fragment</em> <code><a></code>-tag brearing <em>global</em> test-url, name of object , tooltip:</p> <pre><code><a href="test:://test.de:1643/testprod/object/12/345" title="this tooltip">this object</a> </code></pre> <h3>uri-list (text/uri-list)</h3> <p>a list of global test-urls prependend object name in 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 correspond <strong>local</strong> test-urls. whenever data pasted inside test, eis-list mime type preferred. contained data list of eis:</p> <pre><code>/object/12/345 /object/1/26 ... </code></pre> </body> </html> i use ie10 chrome , firefox have problems page-break-* , orphans / widows
the page-break-avoid applied table tells formatting engine not break page inside table. should note formatters not "go backward" , attempt things again, "go forward" engines.
so, have page-break-avoid set on whole table. table 2.5 physical pages long.
first, formatter tries fit in current page. of course can't longer page. throws blank page , tries again. , again, of course can't not fit on page.
so creates new blank page, places header , starts put down rows. have rule -- page-break-after="avoid" on rows. can't break page after row starts putting rows in memory , ... poof. of course not fit on page there more rows page long.
so gives , places table on next page , breaks condition.
you have created hugely over-contrained set of rules.
it's not clear want cannot -- not want table break inside of , want rows kept (those both of rules stated) , give table 2.5 pages long.
i note bit scary:
p { orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid; }
what means keep @ least 10 lines in p tag, never break page before , never after it. literally saying if had 10 p tags in row, none more 10 lines (5 orphans , 5 widows) hit same condition again. not break inside it, before or after it.
now, comment below:
but must (my company). table header must visible in pages.
you must mean on pages on table placed, not pages. , constraints keep table (page-break-inside="avoid" on table) or keep rows in table (page-break-after="avoid" on row) have nothing that. table headers appear on each page table on. long in table-header.
removing constraints -- see table headers fine , no blank pages. remove:
- page-break-inside="avoid" on table
- page-break-after="avoid" on tr
- (and never have set of rules on p)
Comments
Post a Comment