Comment utiliser le langage HTML pour imprimer l'en-tête et pied de page sur chaque page imprimée d'un document?

Est-il possible d'imprimer des pages HTML avec des en-têtes personnalisés et des pieds de page sur chaque page imprimée?

Je tiens à ajouter le mot "non classé" en Rouge, en police Arial, taille 16pt en haut et en bas de chaque imprimé page, quel que soit le contenu.

De clarifier, si le document a été imprimé sur du 5 pages, chaque page doit avoir la coutume d'en-tête et pied de page.

Quelqu'un sait si c'est possible en utilisant le HTML/CSS?

InformationsquelleAutor | 2009-09-01
  1. 333

    Si vous prenez l'élément que vous souhaitez être le pied de page et il faut le position:fixed et bas:0, lors de l'impression de la page, il va répéter l'élément en bas de chaque page imprimée. Le principe est le même travail pour un élément d'en-tête, il suffit de définir top:0 à la place.

    Par exemple:

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

    CSS:

    @media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}
    • Semble ne pas fonctionner si vous avez un élément qui s'étend sur deux pages (pré dans mon cas) - le pied de page sera écrasée sur elle.
    • Oui malheureusement c'est vrai, depuis que vous êtes à l'aide de correction du positionnement sur le pied de page de l'élément, il sera apposé de tous les éléments qui s'exécutent sous elle. Vous pourriez être en mesure de faire quelques réglages avec vos marges et essayer d'obtenir le pied de page à la position à l'extérieur de la marge de la zone de contenu que votre pre est en.
    • Il semble que les navigateurs webkit ne prennent pas en charge correctement. Corrigez-moi si je me trompe, si!
    • Cela ne semble pas répéter sur chaque page.
    • il est à répéter pour moi dans un test simple. Qu'est-ce que votre environnement? Êtes-vous sûr de déclarer un doctype?
    • Quel doctype dois-je déclarer? Autre chose que <!DOCTYPE html>?
    • Qui doit être fine. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> est ce que j'ai dans ma page de test.
    • Quel navigateur utilisez-vous?
    • j'ai fait un en-tête et il répété. mais il se chevaucher avec le contenu en raison de la position fixe. je peux régler uniquement la première page du contenu, mais la suite se chevauchent encore.. toute solution?
    • Cela n'a pas fonctionné pour moi, je suis en utilisant google Chrome 15.0. Tout ce qu'il fait est d'imprimer l'élément où il serait à l'écran, par exemple dans le milieu de la page, si c'est là que je défile vers. Il n'est certainement pas à imprimer sur chaque page.
    • Il ne fonctionne pas pour moi non plus. J'ai eu la même idée, mais il ne fonctionne pas dans n'importe quel navigateur, j'ai essayé :/
    • cela ne fonctionne que pour la première page
    • Je l'ai testé sur Firefox et Chrome. Sur Firefox, cette solution fonctionne, sur Chrome pas.
    • bugs.webkit.org/show_bug.cgi?id=17205 Ticket ouvert depuis 2008... pas de progrès.
    • Tout le monde dit qu'il n'a pas de travail, comment au sujet de fournir une version de navigateur ou quelques informations supplémentaires à propos de ce que vous avez fait?
    • pouvez-vous s'il vous plaît mentionner l'environnement, il ne fonctionne pas pour moi non plus, j'ai firefox 43.0.1 et chrome 47
    • Répéter les en-têtes de tableau sur les pages imprimées a été fixé sur Chrome 5 Juin, 2016. J'ai la version 51.0.2704.103 sur Mac OS X et il fonctionne.
    • La page que je travaillais avait pas de DOCTYPE et en ajoutant qu' (avec "position:fixed" et "top:0") m'a offert le comportement souhaité. Maintenant j'ai juste besoin de comprendre comment faire ce pas de superposition d'autres éléments sur la page.
    • ce ne sera pas affiché sur chaque page. mais juste un!
    • L'en-tête et pied de page ne s'affiche pas sur chaque page. Je veux que ce sur chaque page. toute solution?
    • Fonctionne pour moi sur la dernière version de Chrome & Firefox, pas sur IE/avantage (comment s'étonner).
    • il a travaillé pour moi, mais le problème est que si il y a du texte derrière elle, elle se superpose, au lieu de pousser le texte vers le bas

    InformationsquelleAutor Infotekka
  2. 110

    je crois que la bonne réponse est que le HTML 5 et le CSS3 n'ont aucun support pour l'impression de la page en-tête et pieds de page dans print médias.

    Et alors que vous pourriez être en mesure de le simuler avec:

    • tables
    • position fixe blocs

    ils ont chacun des bugs qui empêchent d'être l'idéal de solution générale.

    • Ne faites pas confiance aux autres réponses. Ils travaillent pour des cas particuliers, mais juste horriblement pause en général. Il n'y a pas de solution fiable jusqu' @page margin boîtes sont mises en œuvre dans les principaux navigateurs. Voir: en.wikipedia.org/wiki/...
    • Malheureusement, je dois upvote ce un. Même si nous avons de l'année 2018 ... pourquoi le hack n'ont-ils pas nous donner un @footer avec content:"stuff" ou semblables.
    • Il est en fait un cahier des charges dans la fabrication W3C pour répondre à ces scénarios.
    InformationsquelleAutor Ian Boyd
  3. 52

    Je viens de passer la moitié de ma journée à venir avec une solution qui fonctionne pour moi et je pensais que je voudrais partager ce que j'ai fait. Le problème avec les solutions ci-dessus que j'ai eu était que tous mes alinéa éléments se chevauchent avec le pied de page que je voulais au bas de la page. Pour contourner ce problème, j'ai utilisé le code CSS suivant:

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

    La page-break-inside pour p et content-block a été crucial pour moi. Toute fois j'ai un p à la suite d'une h*, je enveloppez-les dans un div class = "content-block"> pour s'assurer qu'ils restent ensemble et ne se cassent pas.

    Je suis en espérant que quelqu'un trouve cela utile, car il m'a fallu environ 3 heures pour comprendre (je suis aussi nouvelle en CSS/HTML, donc il n'y a que...)

    MODIFIER

    Par une demande dans les commentaires, je suis l'ajout d'un exemple de document HTML. Vous aurez envie de les copier dans un fichier HTML, ouvrez-le, puis choisissez d'imprimer la page. L'aperçu avant impression doit de montrer ce travail. Il a travaillé dans IE et Firefox sur ma fin, mais Chrome fait la police assez petit pour tenir sur une seule page, donc il n'avait pas d'y travailler.

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

    HTML:

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

    • Merci pour cela, je ne souhaite qu'il y avait un exemple de document HTML dans la réponse à la rendre plus facile.
    • A noté. Je vais essayer de mon mieux pour comprendre ce week-end et de modifier ma réponse.
    • Raté mon week-end de date limite, mais j'ai ajouté l'exemple de code HTML. Espérons que ça aide!
    • Merci @brittenb - très apprécié, vous êtes pardonné pour avoir manqué la date limite ; )
    • pas de travail pour la deuxième page de l'en-tête. encore chevauchement
    • Xue - malheureusement, la solution fournie traite uniquement avec le pied de page, et de ne pas l'en-tête. Vous devez modifier un peu le code pour l'obtenir à appliquer à vos besoins.
    • Cette approche ne fonctionne pas sur Safari (11.1.1), pour autant que je peux dire. Dans le PDF, le rouge texte de pied de page s'affiche qu'une seule fois dans le milieu de la deuxième page, écrasé sur la partie supérieure du corps de texte.
    • Cela fonctionne pour moi sous IE, Firefox et Chrome
    • merci, incroyable utile pour l'impression de les Électrons des applications, depuis l'impression en pdf de la fonctionnalité laks en-tête et pied de page des options
    • Bonjour, je suis en face d'un problème avec l'en-tête. L'en-tête de contenu est superposée à la page 2 et suivantes. Toute suggestion s'il vous plaît??
    • comme indiqué dans les commentaires précédents, ce code traite spécifiquement avec le pied de page, comme on peut le voir par le fait que header n'est jamais mentionné dans le CSS. Vous devez le modifier pour gérer l'en-tête.
    • Oui je l'ai modifié mais toujours avoir de problème. Je me demandais si quelqu'un peut proposer une solution pour l'en-tête si ils ont fait le travail avec l'en-tête s'il vous plaît?
    • il ne fonctionne pas pour plusieurs pages

    InformationsquelleAutor brittenb
  4. 16

    J'ai cherché pendant des années pour trouver une solution et j'ai trouvé ce post sur comment imprimer un pied de page qui fonctionne sur plusieurs pages, sans chevauchement contenu de la page.

    Mon exigence était IE8, pour l'instant j'ai trouvé que cela ne fonctionne pas dans google Chrome. [mise à jour]depuis le 1er Mars 2018, il fonctionne dans Chrome ainsi

    Cet exemple utilise des tables et le pied de page de l'élément de réglage de la feuille de style css: 

    tfoot {display: table-footer-group;}
    • cela fonctionne dans tous les navigateurs et en asp (qui a un peu fou d'un problème avec les pieds de page) ce que je dis.
    • Correction:Ne fonctionne pas sur chrome.
    • Premier commentaire, donnez-moi un immense espoir. Et vous me détruire en une phrase juste après que.
    • En fait, j'ai eu ce travail dans google Chrome. Je n'avais pas de travail dans une très vieille version de linux à base de Chrome mais Chrome a travaillé tout simplement génial.
    • Merci beaucoup pour cette réponse. Il m'a aidé à avoir un pied de page sur chaque page.
    InformationsquelleAutor rweavere
  5. 12

    De cette question -- ajouter les styles suivants pour imprimer une seule feuille de style. Cette solution fonctionne dans IE et Firefox, mais pas dans Chrome (de la version 21):

    #header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
    • J'ai trouvé cette solution que de travailler un. N'ai pas testé tous les navigateurs, mais il fonctionne dans Firefox!
    • 2017 et encore ne fonctionne pas sous Chrome! mais fonctionne dans Firefox
    • mon mauvais.. en enlevant le commentaire
    InformationsquelleAutor Blazemonger
  6. 12

    Utilisation les sauts de page pour définir les styles 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;
} 
}

    Puis ajouter les balises dans le document aux endroits appropriés:

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

    Références

    • Cela ne veut pas imprimer un en-tête et pied de page sur chaque page. Il spécifie le nombre de "pages" avec la meilleure hypothèse. Si vous ne connaissez pas votre document hauteur (nombre de pages), c'est inutile.
    • le document a été imprimé sur du 5 pages
    • c'était juste un exemple. ne doit pas être utilisé pour précisément guide de votre sna.. solution de contournement.
    • ne signifie pas don't. If(juste un exemple), le mot if(juste un exemple) est utilisé par les OP, et if(juste un exemple), l'OP n'est plus actif, est-il préférable de fournir une réponse précise if(juste un exemple) il y a déjà des réponses génériques et if(juste un exemple) les langages(HTML/CSS) et les spécifications en question sont conçu éviter d'indirection et de simplifier les documentation? If(juste un exemple) donc, pourquoi? Sinon, pourquoi pas?
    InformationsquelleAutor Paul Sweatte
  7. 8

    la solution magique est vraiment de mettre chaque chose dans une seule table.

    • thead: c'est par la répétition de l'en-tête.

    • tfoot: la répétition de pied de page.

    • tbody: le contenu.

    et faire une seule tr, td et de mettre chaque chose dans un div

    CODE::

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

    supplémentaire: pour éviter le chevauchement de plusieurs pages. comme:

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

    qui entraîne le débordement qui rendra les choses se chevauchent avec l'en-tête dans les sauts de page..

    donc >> utilisation: page-break-inside: avoid !important; avec cette classe article.

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

    assez simple, j'espère que ça vous donnera le meilleur résultat en vous souhaitant.

    salutations les meilleures. 😉

    source..

    InformationsquelleAutor Biskrem Muhammad
  8. 5

    J'ai essayé de lutter contre cette bataille inutile combinant tfoot & css règles, mais il n'a travaillé que sur Firefox :(. Lors de l'utilisation de la plaine de css, le contenu s'écoule sur le pied de page. Lors de l'utilisation de pied de page, pied de page sur la dernière page ne reste pas bien sur le fond. C'est parce que les pieds de table sont conçus pour les tables, pas de pages physiques. Testé sur Chrome 16, Opera 11, Firefox 3 & 6 et 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>
    InformationsquelleAutor jous
  9. 4

    Une approche qui ne fonctionne que pour ajouter des en-têtes de chaque page est d'envelopper votre contenu dans un <table>, puis de mettre votre contenu en tête dans un <thead> tag et votre contenu dans un <tbody> la balise:

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

    Cela fonctionne dans Chrome, pas sûr à 100% sur les autres navigateurs.

    • cela fonctionne tant que notre thead et tfoot n'a pas beaucoup de <tr>les lignes, on dirait thead et tfoot a un max de hauteur de l'ensemble , dans mon cas, j'ai eu 9 <tr> les lignes en thead, quand je l'ai réduite à 3 ou 5 ça fonctionne
    • C'est un truc intéressant! Thead fonctionne comme un charme, mais tfoot ne l'est pas. Toutes les idées sur la façon de le faire fonctionner?
    • Tfoot fonctionne dans les navigateurs, mais n'est pas dans MS word. Thead fonctionne dans les deux.
    • Aucune idée de comment obtenir tfoot de travail, désolé!
    InformationsquelleAutor Dana Woodman
  10. 3

    Si vous pouvez utiliser javascipt, le client poignée de pose du contenu à l'aide de javascript à placer des éléments en fonction de l'espace disponible.

    Vous pouvez utiliser le jquery colonnisseur plugin dynamiquement à organiser votre contenu en blocs de taille fixe, et vos en-têtes et pieds de page dans le cadre de l'rendu de la routine.
    http://welcome.totheinter.net/columnizer-jquery-plugin/

    Voir l'exemple 10
    http://welcome.totheinter.net/autocolumn/sample10.html

    Le navigateur va encore ajouter ses propres en-têtes ou pieds de page si l'option est activée dans le système d'exploitation. Mise en page cohérente sur toutes les plateformes et navigateurs nécessitera probablement conditionnelle css.

    • La condition de démonstration ne fonctionne même pas (les pages ne se cassent pas, saigner les uns aux autres, etc.), et encore moins avec la plus universelle de contenu.
    • J'aurais du préciser. Les liens proposés sont des exemples d'une bibliothèque javascript pour la pose de contenu à travers des récipients et n'est pas de configuration pour l'impression. Ce lien est destiné à être un exemple de l'utilisation de js à disposition de contenu dans les limites spécifiées. J'ai utilisé js comme un moteur de rendu avec wkhtmltopdf pour créer des livres de cuisine à partir de la base de données de contenu.
    • La question est à propos de l'impression.
    InformationsquelleAutor sparkalow
  11. 2

    Est-ce quelque chose que vous voulez imprimer seulement? Vous pourriez ajouter à chaque page de votre site et utiliser les CSS pour définir la balise comme une impression de médias.

    Comme un exemple, ce pourrait être un exemple d'en-tête:

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

    Et dans votre CSS, faire quelque chose comme ceci:

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

    Enfin, pour inclure l'en-tête/pied de page sur chaque page, vous pouvez utiliser des inclusions côté serveur ou si vous avez des pages générées avec PHP ou ASP, vous pouvez simplement le code dans un fichier commun.

    Edit:

    Cette réponse est destinée à fournir un moyen de montrer quelque chose sur la physique de la version imprimée d'un document tout en ne montrant pas le contraire. Cependant, tout comme les commentaires le suggèrent, il ne résout pas la question d'avoir un pied de page sur plusieurs pages imprimées lorsque le contenu déborde.

    Je vais la laisser ici, dans le cas où c'est utile quand même.

    • +1 pour l'utilisation de l'affichage plutôt que de la visibilité - visibility : hidden feuilles d'espace réservé, alors que display : none réduit les espaces, les économies de papier et fait de la planète Terre survivre plus longtemps.
    • -1: bien qu'un bon exemple d'une impression de la feuille de style, il ne traite pas de la question de savoir quand le contenu déborde de la page.. Comme il est, cela ne ferait que montrer le pied de page à la dernière page.
    InformationsquelleAutor JYelton
  12. 0

    Si vous utilisez un moteur de template comme Asp.net Moteur de Rasoir ou Angulaire,
    Je pense que vous devez re-générer votre page et de diviser la page en plusieurs pages et vous pouvez alors librement de balisage de chaque page et de mettre en-tête et pied de page sur le thème.
    un exemple pourrait être comme ci-dessous:

    CSS:

    @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;
}

    HTML:

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

    InformationsquelleAutor pixparker
  13. 0

    J'ai trouvé une solution. L'idée de base est de faire un tableau et dans la section thead placer les données de la tête dans la tr et en css force pour montrer que tr uniquement en mode pas à l'écran, puis normal de votre en-tête doit être force de montrer que dans l'écran de ne pas en imprimer. 100% de travail sur le nombre de pages à imprimer. exemple de code est ici

    <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>
    InformationsquelleAutor A.Z. Soft
  14. -2

    Si vous ne t besoin de la mise en forme utiliser document.title et qui fonctionne comme un charme dans tous les principaux navigateurs (testé sur Chrome , IE 11, Firefox).

    Ou vous pouvez utiliser 

    <title>Title repeated on each Page - CLASSIFIED</title>
    InformationsquelleAutor bhantol