Как использовать HTML для печати верхнего и нижнего колонтитула на каждой напечатанной странице документа?

516

Можно ли печатать HTML-страницы с пользовательскими колонтитулами на каждой печатной странице?

Я хотел бы добавить слово «НЕКЛАССИФИЦИРОВАННЫЙ» красным, Arial, размером 16pt в верх и низ каждой печатной страницы, независимо от содержимого.

Чтобы уточнить, если документ был напечатан на 5 страницах, каждая страница должна иметь собственный верхний и нижний колонтитулы.

Кто-нибудь знает, возможно ли это с помощью HTML / CSS?

css header printing stylesheet footer Нян
источник

3

См. Зачем использовать XSL-FO вместо CSS2 для преобразования HTML в хороший PDF? вопрос и ответы.

Питер Краусс

3

Это вопрос, на который я пытаюсь ответить долгое время. Похоже, что ключом к проблеме были бы css-элементы, такие как page, top-center, content, position: running (..). Как это могло бы выглядеть, если бы браузеры полностью поддерживали @page: techrepublic.com/blog/webmaster/… alistapart.com/articles/boom alistapart.com/articles/building-books-with-css3 Некоторые открытые проблемы: code.google.com / p / chromium / Issues / Detail

Даниил

Я отправил Chrome-совместимые решения здесь , что добавит бегущий заголовок к документам , которые не содержат чрезмерно большие пространства текста. Тем не менее, пока нет решения для нижних колонтитулов.

Доктор Деструкто

2

Combinative Решение : как pisition: fixedи thead tbody tfootметоды имеют свои недостатки , так что вы должны объединить их, далее здесь .

Мохаммад Мусави

353

Если вы возьмете элемент, который хотите сделать нижним колонтитулом, и установите для него положение: fixed и bottom: 0, при печати страницы этот элемент будет повторяться внизу каждой напечатанной страницы. То же самое будет работать для элемента заголовка, просто установите top: 0.

Например:

<div class="divFooter">UNCLASSIFIED</div>

CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

Infotekka
источник

62

Кажется, не работает, если у вас есть элемент, который занимает две страницы (предварительно в моем случае) - нижний колонтитул будет перезаписан на нем.

Бенджол

77

Кажется, что браузеры WebKit не поддерживают это должным образом. Поправь меня, если я ошибаюсь!

Грегг Линд

61

Это не повторяется на каждой странице.

Тайсон с северо-запада

24

Это не сработало для меня, я использую Chrome 15.0. Все, что он делает - это печатает элемент там, где он будет на экране, например, в середине страницы, если это то, где я прокручивал. Это конечно не печатает на каждой странице.

Чарви

11

Я проверил это на Firefox и Chrome. На Firefox это решение работает, на Chrome нет.

Джаро

131

Я считаю, что правильный ответ заключается в том, что HTML 5 и CSS3 не поддерживают печать верхних и нижних колонтитулов в printсредствах массовой информации.

И хотя вы можете смоделировать это с:

таблицы
блоки с фиксированным положением

у каждого из них есть ошибки, которые мешают им быть идеальным общим решением.

Ян Бойд
источник

36

Не верь другим ответам. Они могут работать для особых случаев, но в целом просто ужасно сломаются. Надежного решения не существует, пока в основных браузерах не будут реализованы поля @page. См: en.wikipedia.org/wiki/...

user2847643

21

К сожалению, я должен поддержать это. Несмотря на то, что у нас 2018 год ... почему, черт возьми, они не дают нам @footerс собой content:"stuff"или тому подобное.

Кай Ноак

1

На самом деле в W3C есть спецификация для решения этих сценариев.

Менди

Я думаю, что это лучший ответ. Проблема заключается в поставщиках браузеров. Вы можете создавать привлекательные PDF-файлы вне браузера с помощью CSS Paged Media с помощью коммерческих инструментов, подобных этим (и другим): Antenna House satellitehouse.com/formatter , Prince princexml.com .

markg

Я делаю это как комментарий, а не как ответ, поэтому, пожалуйста, не нажимайте на меня "ОП не спрашивал ...". Одной из возможностей является использование генератора PDF, который позволяет устанавливать фиксированные верхние и нижние колонтитулы и отображать представление в этом формате, когда пользователь решает, что ему нужен настоящий «предварительный просмотр» или печатный документ. HTML предназначен для рендеринга экрана, а на экранах отсутствует концепция страниц. PDF также может означать формат печатного документа (я знаю, что нет) и является модальностью, где верхние и нижние колонтитулы страницы имеют значение. NReco.PdfGenerator очень доступен для деловых целей или бесплатно.

Newclique

71

Я потратил лучшую половину своего дня, чтобы найти решение, которое действительно работало бы для меня, и думал, что поделюсь тем, что я сделал. Проблема с вышеупомянутыми решениями заключалась в том, что все элементы моего абзаца перекрывались с нижним колонтитулом, который я хотел внизу страницы. Чтобы обойти это, я использовал следующий CSS:

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}

page-break-insideДля pи content-blockимеет решающее значение для меня. Каждый раз, когда у меня есть pподписка h*, я оборачиваю их обоих, div class = "content-block">чтобы они оставались вместе и не ломались.

Я надеюсь, что кто-то найдет это полезным, потому что мне потребовалось около 3 часов, чтобы понять (я также новичок в CSS / HTML, так что это ...)

РЕДАКТИРОВАТЬ

По запросу в комментариях я добавляю пример HTML-документа. Вы захотите скопировать это в HTML-файл, открыть его и затем распечатать страницу. Предварительный просмотр печати должен показать эту работу. С моей стороны это работало в Firefox и IE, но Chrome сделал шрифт достаточно маленьким, чтобы поместиться на одной странице, поэтому он там не работал.

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>
      Example Document
    </h1>
    <div>
      <p>
        This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
      </p>
    </div>
    <div>
      <h3>
        Example Section I
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.
        
        Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
      </p>
    </div>
    <div class="content-block">
      <h3>Example Section II</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
      </p>
    </div>
    <footer>
      This is the text that goes at the bottom of every page.
    </footer>
  </body>
</html>

Развернуть фрагмент

brittenb
источник

1

Спасибо за это, я только хотел, чтобы в ответе был образец HTML-документа, чтобы было легче.

Эрик Кигати

2

@EricKigathi отметил. Я сделаю все возможное, чтобы добраться до этого в эти выходные и отредактировать мой ответ.

Бриттэнб

2

@EricKigathi Пропустил крайний срок моих выходных, но я добавил пример HTML-кода. Надеюсь, это поможет!

Бриттенб

Спасибо @brittenb - очень признателен, вы прощены за то, что пропустили крайний срок; )

Эрик Кигати

3

не работает для второй страницы для заголовка. все еще перекрываются

Фэй Сюэ - MSFT,

17

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

Моим требованием был IE8, поэтому я обнаружил, что это не работает в Chrome. [ обновление ] По состоянию на 1 марта 2018 года он работает и в Chrome

В этом примере используются таблицы и элемент tfoot путем установки стиля css:

tfoot {display: table-footer-group;}

rweavere
источник

2

это работает во всех браузерах и в asp (который имеет некоторые сумасшедшие проблемы с нижними колонтитулами).

DWolf

17

@DWolf Первый комментарий дает мне огромную надежду. И вы уничтожите меня в одном предложении сразу после этого.

C0ZEN

У меня действительно была эта работа в Chrome. У меня не было этого в очень старой версии Chromium на основе Linux, но Chrome работал просто замечательно.

njfife

С 2019 года он работает в Chrome!

Олег

13

Волшебное решение - положить все вещи в один стол.

thead : это для повторного заголовка.
tfoot : повторный нижний колонтитул.
tbody : содержание.

и сделать один тр, тд и положить все в дел

КОД ::

<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
            ...
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           ...
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            ...
            </div>
          </td>
       </tr>
     </tbody>
</table>

table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
}

дополнительно : для предотвращения наложения на несколько страниц. подобно:

<div class="main">
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
  ...
  ...
  ...
</div>

что приводит к переполнению, которое заставляет вещи перекрываться с заголовком внутри разрывов страниц.

так >> используйте: page-break-inside: avoid !important;с этим классом article.

table.report-container div.article {
    page-break-inside: avoid;
}

довольно просто, надеюсь, это даст вам лучший результат, который вы хотите.

наилучшие пожелания. ;)

источник ..

Бискрем Мухаммед
источник

Лучшее решение здесь. Несколько замечаний: Flexbox может вызвать непредвиденное поведение. Если вы хотите, чтобы нижний колонтитул на странице lsat был нижним, вам понадобится это решение и решение из @Infotekka вместе.

Арсений-II

11

Из этого вопроса - добавьте следующие стили в таблицу стилей только для печати. Это решение будет работать в IE и Firefox, но не в Chrome ( начиная с версии 21):

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}

Blazemonger
источник

1

Я нашел это решение только работающим. Не протестировал все браузеры, но он работает в Firefox!

Примоз Рим

2

2017 и до сих пор не работает в Chrome! но работает в Firefox

Mehdi

@MehdiDehghani: мой плохой .. снял комментарий

Fr0zenFyr

10

Используйте разрывы страниц для определения стилей в CSS:

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

Затем добавьте разметку в документ в соответствующих местах:

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

Ссылки

Пол Суатте
источник

32

Это не печатает верхний и нижний колонтитулы на каждой странице. Он определяет множество «страниц» с наилучшим предположением. Если вы не знаете высоту документа (количество страниц), это бесполезно.

rainabba

@rainabbaif the document was printed onto 5 pages

Пол Sweatte

4

это был просто пример. не следует использовать для точного руководства вашим ответом.

igorsantos07

@ igorsantos07 shouldне значит don't. If(только пример) слово if(просто пример) используется OP, и if(только пример) OP больше не активен, лучше предоставить конкретный ответ if(только пример), уже есть общие ответы и if(просто пример) языки (HTML / CSS) и рассматриваемые спецификации предназначены для того, чтобы избежать косвенного обращения и упростить документирование ? If(просто пример) так почему? Иначе почему бы и нет?

Пол Свитт

5

Я пытался бороться с этим бесполезным сражением, комбинируя правила tfoot & css, но это работало только на Firefox :(. При использовании простого CSS содержимое передается через нижний колонтитул. При использовании tfoot нижний колонтитул на последней странице не остается красиво внизу Это потому, что нижние колонтитулы предназначены для таблиц, а не для физических страниц. Протестировано на Chrome 16, Opera 11, Firefox 3 & 6 и IE6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Header & Footer test</title>

<style>

  @media screen {
    div#footer_wrapper {
      display: none;
    }
  }

  @media print {
    tfoot { visibility: hidden; }

    div#footer_wrapper {
      margin: 0px 2px 0px 7px;
      position: fixed;
      bottom: 0;
    }

    div#footer_content {
      font-weight: bold;
    }
  }

</style>
</head>

<body>

<div id="footer_wrapper">
  <div id="footer_content">
    Total 4923
  </div>
</div>


<TABLE CELLPADDING=6>

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
</TBODY>

<TFOOT id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR>
</TFOOT>

</TABLE>

</body>
</html>

jous
источник

4

Один из подходов, который работает только для добавления заголовков на каждую страницу, заключается в том, чтобы заключить содержимое в a, <table>а затем поместить содержимое заголовка в <thead>тег, а содержимое - в <tbody>тег следующим образом:

<table>
  <thead>
    <tr>
      <th>This content appears on every page</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Put all your content here, it can span multiple pages and your header will show up at the top of each page</td>
     </tr>
   </tbody>
 </table>

Это работает в Chrome, не уверен на 100% о других браузерах.

Дана Вудман
источник

1

это работает до тех пор, пока наш thead и tfoot не имеют много строк <tr>, похоже, что thead и tfoot имеют набор максимальной высоты, в моем случае у меня было 9 строк <tr> в thead, когда я уменьшил его до 3 или 5 это работает

Сундара Прабу

Это ловкий трюк! Thead работает как шарм, но tfoot нет. Есть идеи, как заставить это работать?

Ирикос

Tfoot работает в браузерах, но не в MS Word. Thead работает в обоих.

Ирикос

3

Если вы можете использовать javascipt, сделайте так, чтобы клиент обрабатывал содержимое, используя javascript для размещения элементов на основе доступного пространства.

Вы можете использовать плагин jquery columnizer для динамического размещения вашего контента в блоках фиксированного размера и позиционирования верхних и нижних колонтитулов как части процедуры рендеринга. http://welcome.totheinter.net/columnizer-jquery-plugin/

Смотрите пример 10 http://welcome.totheinter.net/autocolumn/sample10.html

Браузер будет по-прежнему добавлять свои собственные верхние или нижние колонтитулы, если они включены в ОС. Согласованная разметка между платформами и браузерами, вероятно, потребует условного CSS.

sparkalow
источник

3

Прилагаемая демонстрация даже не работает (страницы не ломаются, не перетекают друг на друга и т. Д.), Не говоря уже о более универсальном контенте.

rainabba

1

Я должен был уточнить. Предоставленные ссылки являются примерами библиотеки javascript для размещения содержимого в контейнерах и не предназначены для печати. Эта ссылка должна была стать примером использования js для размещения содержимого в указанных границах. Я использовал js как движок рендеринга с wkhtmltopdf для создания кулинарных книг из содержимого базы данных.

sparkalow

Вопрос о печати.

Грег Бласс

2

Я удивлен и не впечатлен тем, что Chrome имеет такую ужасную поддержку CSS-печати.

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

CSS-печать не может решить эту проблему, по крайней мере, не с поддержкой современных браузеров. Но, выйдя за пределы печати, CSS3 может сделать большую работу:

https://jsfiddle.net/b9chris/moctxd2a/29/

<div class=page>
  <header></header>
  <div class=content>Content</div>
  <footer></footer>
</div>

SCSS:

body {
  @media screen {
    width: 7.5in;
    margin: 0 auto;
  }
}

div.page {
  display: flex;
  height: 10in;    
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: stretch;
}

div.content {
  flex-grow: 1;
}

@media print {
  @page {
    size: letter;  // US 8.5in x 11in
    margin: .5in;
  }

  footer {
    page-break-after: always;
  }
}

В этом примере немного больше кода, в том числе немного Cat Ipsum; но используемый js только для того, чтобы продемонстрировать, насколько верхний / нижний колонтитул может меняться, не нарушая нумерацию страниц. Ключ на самом деле заключается в том, чтобы взять укол Flex-box в CSS, а затем применить его к странице с известной фиксированной высотой - в данном случае это лист размером 8,5 x 11 дюймов, размером с американскую бумагу размером с букву .5 "Поля уходят width: 7.5inи height: 10inточно. После того, как гибкий контейнер CSS сообщается с его точными размерами (div.page ), легко получить верхний и нижний колонтитул для расширения и сжатия, как в обычной типографии.

Осталось только передать содержимое страницы, когда, например, нижний колонтитул вырос до 8 сносок, а не 3. В моем случае содержимое достаточно фиксировано, и мне не нужно об этом беспокоиться, но я уверен, что есть способ сделать это. Один подход, который приходит на ум, заключается в том, чтобы превратить верхний и нижний колонтитулы в плавающие элементы шириной 100%, а затем расположить их с помощью Javascript. Браузер будет автоматически обрабатывать прерывания обычного потока контента.

Крис Москини
источник

0

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

В качестве примера это может быть пример заголовка:

<span class="printspan">UNCLASSIFIED</span>

И в вашем CSS, сделайте что-то вроде этого:

<style type="text/css" media="screen">
    .printspan
    {
        display: none;
    }
</style>
<style type="text/css" media="print">
    .printspan
    {
        display: inline;
        font-family: Arial, sans-serif;
        font-size: 16 pt;
        color: red;
    }
</style>

Наконец, чтобы включить верхний / нижний колонтитул на каждую страницу, вы можете использовать серверные включения или, если у вас есть какие-либо страницы, генерируемые с помощью PHP или ASP, вы можете просто закодировать их в общий файл.

Редактировать:

Этот ответ предназначен для того, чтобы предоставить способ показать что-то в физической печатной версии документа, но не показывать это иначе. Однако, как показывают комментарии, это не решает проблему наличия нижнего колонтитула на нескольких печатных страницах, когда содержимое переполняется.

Я оставляю это здесь в случае, если это все же полезно.

JYelton
источник

4

+1 для использования дисплея, а не видимости - видимость: скрытый оставляет зарезервированное пространство, тогда как дисплей: ни один не разрушает пустое пространство, экономит бумагу и заставляет планету Земля выживать дольше.

Фентон

3

-1: хотя это хороший пример таблицы стилей печати, она не решает проблему переполнения страницы страницей содержимого. Таким образом, нижний колонтитул будет отображаться только на последней странице.

NotMe

0

Если вы используете шаблонизатор, такой как Asp.net Razor Engine или Angular, я думаю, что вы должны заново сгенерировать свою страницу и разделить страницу на несколько страниц, а затем вы можете свободно разметить каждую страницу и поместить верхний и нижний колонтитулы в тему. один пример может быть как ниже:

@page {
  size: A4;  
   margin: .9cm;
}


@media print {

   body.print-paper-a4 {
    width: 210mm;
    height: 297mm;
  }

   body {
       background: white;
       margin: 0;
       padding: 0;
   }

   .print-stage,
   .no-print {
       display: none;
   }


   body.print-paper.a4 .print-paper {
      width: 210mm;
        height: 297mm;
    }

   .print-paper {
       page-break-after: always;
       margin: 0;
       padding: .8cm;
       border:none;
       overflow: hidden;
   }

}





.print-papers {
    display: block;
    z-index: 2000;
    margin: auto;

}


body.print-paper-a4 .print-paper {
    width: 21cm;
    height:27cm;
}


.print-paper {
    margin: auto;
    background: white;
    border: 1px dotted black;
    box-sizing: border-box;
    margin: 1cm auto;
    padding: .8cm;
       overflow: hidden;   
}


body.print-mode .no-print-preview {
    display: none;
}

body.print-mode .print-preview {
    display: block;
}

<body class="print-mode print-paper-a4">
        
        <div class="print-papers print-preview">
            <div class="print-paper">
                <div style="font-size: 5cm">
                    HELLO
                </div>

            </div>
            <div class="print-paper">
              <div class="page-header">
                </div>
              
              
            </div>
            <div class="print-paper">
                
                

            </div>            
        </div>
  </body>

Развернуть фрагмент

pixparker
источник

0

Я нашел одно решение. Основная идея состоит в том, чтобы создать таблицу и в разделе thead поместить данные заголовка в tr и силой css, чтобы показать, что tr только при печати, а не на экране, тогда ваш обычный заголовок должен быть принудительно отображен только на экране, а не в печати. 100% работает на многих страницах печати. пример кода здесь

<style> 
    @media screen {
        .only_print{
            display:none;
        }
    }
    @media print {
        .no-print {
            display: none !important;
        }
    }
    TABLE{border-collapse: collapse;}
    TH, TD {border:1px solid grey;}
</style>
<div class="no-print">  <!-- This is header for screen and will not be printed -->
    <div>COMPANY NAME FOR SCREEN</div>
    <div>DESCRIPTION FOR SCREEN</div>
</div>

<table>
    <thead>
        <tr class="only_print"> <!-- This is header for print and will not be shown on screen -->
            <td colspan="100" style="border: 0px;">
                <div>COMPANY NAME FOR PRINT</div>
                <div>DESCRIPTION FOR PRINT</div>
            </td>
        </tr>
        <!-- From here Actual Data of table start -->
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    </tbody>
</table>

AZ Soft
источник

0

Попробуйте это, для меня это работает на Chrome, Firefox и Safari. Вы получите верхний и нижний колонтитулы, закрепленные на каждой странице, не перекрывая содержимое страницы

CSS

<style>
  @page {
    margin: 10mm;
  }

  body {
    font: 9pt sans-serif;
    line-height: 1.3;

    /* Avoid fixed header and footer to overlap page content */
    margin-top: 100px;
    margin-bottom: 50px;
  }

  #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    /* For testing */
    background: yellow; 
    opacity: 0.5;
  }

  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 6pt;
    color: #777;
    /* For testing */
    background: red; 
    opacity: 0.5;
  }

  /* Print progressive page numbers */
  .page-number:before {
    /* counter-increment: page; */
    content: "Pagina " counter(page);
  }

</style>

HTML

<body>

  <header id="header">Header</header>

  <footer id="footer">footer</footer>

  <div id="content">
    Here your long long content...
    <p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
  </div>

</body>

Фред К
источник

-2

Основываясь на каком-то посте, я думаю, что position: fixedработает для меня.

body {
  background: #eaeaed;
  -webkit-print-color-adjust: exact;
}

.my-footer {
  background: #2db34a;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
}

.my-header {
  background: red;
  top: 0;
  left: 0;
  position: fixed;
  right: 0;
}

<html>

<head>
  <meta charset=utf-8 />
  <title>Header & Footer</title>

</head>

<body>
  <div>
    <div class="my-header">Fixed Header</div>
    <div class="my-footer">Fixed Footer</div>
    <table>
      <thead>
        <tr>
          <th>TH 1</th>
          <th>TH 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Развернуть фрагмент

Нажмите Ctrl + P в Chrome, чтобы увидеть текст верхнего и нижнего колонтитула на каждой странице. Надеюсь, поможет

Джастин Патель
источник

12

Да, верхние и нижние колонтитулы печатаются на каждой странице, но они перекрывают содержимое страницы.

Тони

Как использовать HTML для печати верхнего и нижнего колонтитула на каждой напечатанной странице документа?

Ответы:

РЕДАКТИРОВАТЬ

дополнительно : для предотвращения наложения на несколько страниц. подобно: