Print Page Numbers on Pages When Printing HTML

Print page numbers on pages when printing html

As @page with pagenumbers don't work in browsers for now I was looking for alternatives.

I've found an answer posted by Oliver Kohll.

I'll repost it here so everyone could find it more easily:

For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.

The CSS is:

#content {
    display: table;
}

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

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

And the HTML code is:

<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>

This way you can customize your page number by editing parametrs to #pageFooter. My example:

#pageFooter:after {
    counter-increment: page;
    content:"Page " counter(page);
    left: 0; 
    top: 100%;
    white-space: nowrap; 
    z-index: 20;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

This trick worked for me fine. Hope it will help you.

HTML - How to print page number with thead/tfoot

Not all browsers support content:counter(page); So far the only one I've found that does is Firefox. But it doesn't work with your code example because you're using tables. Specifically, page-break-before does not (is not supposed to) work within a table. Chrome lets you, but Firefox doesn't.

For demonstration purposes I've tried to recreate your table in css and paginate the results.

You'll need to copy the results into a new .html file to test.

body {  width: 300px;}
#header {  border: 1px solid;  overflow: hidden;}
#header>div {  float: left;  width: 50%;  line-height: 100px;  text-align: center;}
#foot {  border: 1px solid;}
#header p {  margin: 0;}
#header #page-number {  border-left: 1px solid;  width: calc(50% - 1px);}
#page-number:after {  content: "All pages";}
@media print {  .pageBreak {    page-break-before: always;    padding-bottom: 120px;  }  #content {    padding-top: 120px;  }  #header {    display: block;    position: fixed;    top: 0pt;    left: 0pt;    right: 0pt;  }  #page-number:after {    content: "Page " counter(page);    counter-increment: page;  }  #foot {    display: block;    position: fixed;    bottom: 0pt;  }}

<div id="header">  <div id="header-title">    <p>Header title</p>  </div>  <div id="page-number"></div></div><div id="content">  First page with some data.  <div class="pageBreak"></div>  Second page with some data.  <div class="pageBreak"></div>  Third page with some data.  <div class="pageBreak"></div>  Fourth page with some data.  <div class="pageBreak"></div></div><div id="foot">  Other info.</div>

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}