Databases
StackOverflow2013
Postsdbo
POHow to put a blank space atop of each page of a printed HTML
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to put a blank space atop of each page of a printed HTML
    primarykey
    data
    text
    <p>I've designed an HTML report with several <code>div</code>s and <code>table</code>s. Now my client asks me to put a repeating header at the top of each printed page. This is not possible using plain CSS and HTML as far as I know. Just as a try, I put header div element inside a thead to which I applied <code>display: table-header-group</code> in order to be displayed, and put all other elements of the report as rows of the main table but no success.</p> <ol> <li><p>A workaround is to use <code>@print { .header {position: fixed; top: 10px} }</code> in order to repeat .header element at the top of each page. But for this work, we should put a blank space at the top of each new page; otherwise fixed header element is mixed with other elements at the top of table.</p></li> <li><p>As another workaround I can compute elements height at render time and put manual page breaks where needed. So I want to know if there is any Javascript library available to execute at page load and computes all render-time heights of div elements of the page and put a zero-height div element with <code>page-break-before: always;</code> before each div which exceeds height of an A4 paper. For suppose the following divs result in 14, 10, 8, 9, 6, 13, and 6 centimeter height at render time. I want the library put a page-break dummy dive element at specified locations: </p></li> </ol> <p><code>&lt;div id="d1"&gt;...&lt;/div&gt;</code></p> <p><code>&lt;div id="d2"&gt;...&lt;/div&gt;</code></p> <p><code>&lt;!-- here, because 14+10+8 exceeds 30cm --&gt;</code></p> <p><code>&lt;div id="d3"&gt;...&lt;/div&gt;</code></p> <p><code>&lt;div id="d4"&gt;...&lt;/div&gt;</code></p> <p><code>&lt;div id="d5"&gt;...&lt;/div&gt;</code></p> <p><code>&lt;!-- here, because 8+9+6+13 exceeds 30cm --&gt;</code></p> <p><code>&lt;div id="d6"&gt;...&lt;/div&gt;</code></p> <p><code>&lt;div id="d7"&gt;...&lt;/div&gt;</code></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMohsen
    1. USMohsen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to put a blank space atop of each page of a printed HTML
      1. USBenAlabaster
      1. VTFavorite
    2. VO
      singulars
      1. POHow to put a blank space atop of each page of a printed HTML
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to put a blank space atop of each page of a printed HTML
      1. USMohsen
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload