Pagination с верхним и нижним колонтитулом

Question

Я хочу подготовить страницу печати, которая должна быть разделена на страницы формата А4. И эти страницы должны иметь верхний и нижний колонтитулы.

Эта страница увеличивается на 3 таблицы. Первая таблица - это заголовок второй таблицы, третий контент - нижний колонтитул.

Содержимое должно быть разделено на две таблицы (я называл его «таблицей контента»).

Например:

, если содержимое имеет эти строки (мы определяем содержание высоту таблицы = 600 перед тем)

<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> 

первой 3 строка должна быть в первой странице печати, другие 2 строки должна быть в секунде распечатать страницу.

Как что:

Первая печать страницы:

< 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 > 

Вторая печать страницы:

< 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 > 

Я делаю это раньше с помощью функции() высота JQuery. Я измерил всю высоту строк и сравнил их с высотой таблицы содержимого (600). Затем я пишу страницы печати после разделения строк с помощью функции document.write. Но на длинных страницах он медленный.

Я хочу сделать это снова, используя другой лучший способ. Как я могу это сделать? Надеюсь, ты понимаешь мой вопрос.

Answer 1

http://w3schools.com/cssref/pr_print_pageba.asp http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Просто используйте CSS.

Для верхнего и нижнего колонтитула вы можете использовать положение: фиксированное. Заголовок: вверху: 0px Нижний колонтитул: внизу: 0px;

<div class='header'></div> 
<div class='content'></div> 
<div class='footer'></div> 

Вы добавляете поля в контент, соответствующий размерам верхнего/нижнего колонтитула, поэтому он не будет перезаписываться.