5

I've done creating a report and the next step is creating a header which will be printed in each page. I've tried using the solutions offered in How to use HTML to print header and footer on every printed page of a document? - but they don't seem to work fine on webkit browsers.

Have you got any idea of implementing this option in my report?

Community
  • 1
  • 1

3 Answers3

6

Printing headers and footers on every page is very difficult task, if you use div tags. In my project I had searched almost full web and found that for printing the Headers and Footers every page you have to use tables and CSS rules, without using table and css you can't do printing of headers on every page. I am providing you the code for doing so as under:

<style>
    @media screen{thead{display:none;}}
    @media print{thead{display:table-header-group; margin-bottom:2px;}}
    @page{margin-top:1cm;margin-left:1cm;margin-right:1cm;margin-bottom:1.5cm;}}
</style>

First CSS rule make that thead of table would not be displayed on the screen for the user and Second rule defines that during printing thead is displayed as table-header-group as this rule would show header on every page if you omit this headers would not print on each page and third rule is for maintaining the page margins from overlapping of header or footers and your html code would be as under:

<table>
    <thead>
        <tr>
            <th>  <---  Your header text would be placed here    --->  </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <--- Your printing text would be place here    ---> 
            </td>
        </tr>
    </tbody>
</table>

Last thing, I have tried thing code on IE, Safari, Firefox and Chrome and would like to tell you that on Chrome the header is printed only on 1st page. I had also reported the bug many times but Chrome is not doing any thing about this issue.

Vineet1982
  • 7,730
  • 4
  • 32
  • 67
1

You can use iframes but i don't recommend it no one uses it.

Iif you create the reports dynamically, you best bet would be adding the header to the created page on creation. This is the most widely used technique after all.

The other option might be using css content property.

div#main:before {
    content: "<p>I appear before the div tag</p><hr />"
}

Note: IE8 only supports the content property if a !DOCTYPE is specified.

Mr.Web
  • 6,992
  • 8
  • 51
  • 86
Umur Kontacı
  • 35,403
  • 8
  • 73
  • 96
0

As of today the bug on webkit.org is still not resolved: https://bugs.webkit.org/show_bug.cgi?id=17205

I had the same problem working with a webkit engine that converts HTML to PDF. This worked for me:

First make your css available for all media types

<style type="text/css" media="all">

Make sure the display property for thead is set:

thead { display: table-header-group;}

Last one, to fix problems where rows of the table get overlapped by the headers or rows being cut in half at page break

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead tr th{ height: 50px;}
ghorkov
  • 1