Reputation: 2300
I want to prepare a print page which must be splitted to A4 pages. And this pages must have a header and footer.
This page increase 3 table. First table is header second table is content third table is footer.
Content must be splitted to second tables (I called it as "content table").
For example:
if content has this rows (we determine content table height=600 before)
<tr height="100"><td> row1 </td></tr>
<tr height="300"><td> row2 </td></tr>
<tr height="150"><td> row3 </td></tr>
<tr height="100"><td> row3 </td></tr>
<tr height="250"><td> row3 </td></tr>
first 3 row must be in first print page, other 2 row must be in second print page.
Like that :
First print page :
< Header table >
</ Header table >
< Context table >
<tr height="100"><td> row1 </td></tr>
<tr height="300"><td> row2 </td></tr>
<tr height="150"><td> row3 </td></tr>
</ Context table >
< Footer table >
</ Footer table >
Second print page :
< Header table >
</ Header table >
< Context table >
<tr height="100"><td> row3 </td></tr>
<tr height="250"><td> row3 </td></tr>
</ Context table >
< Footer table >
</ Footer table >
I do it before with using jQuery height() function. I measured all the rows height and compared them with content table height (600). Then i write the print pages after split the rows with document.write
function. But it is slow in long pages.
I want to do this again using another better way. How can i do that? I hope you understand my question.
Upvotes: 0
Views: 4407
Reputation: 782
http://w3schools.com/cssref/pr_print_pageba.asp http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml
Just use CSS.
For header and footer you can use position: fixed. Header: top: 0px Footer: bottom: 0px;
<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>
You add margins to content that match sizes of header/footer, so it won't overwrite.
Upvotes: 1