Geek Answers Handbook

Print Header on Each Page

I made a report, and the next step is to create a heading that will be printed on each page. I tried using the solutions suggested in How to use HTML to print the header and footer on each printed page of a document? - but they don't seem to work fine on web browsers.

Do you have an idea to implement this option in my report?

+5
source share
4 answers

Printing headers and footers on each page is a very difficult task if you use div tags. In my project, I looked for an almost complete web and found that to print headers and footers on each page you should use tables and CSS rules, without using a table and css you cannot print headers on every page. I provide you the code for this:

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

CSS , thead , , thead table-header-group, , , - , html- :

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

, IE, Safari, Firefox Chrome , Chrome 1- . , Chrome .

+4

iframes, .

, . .

css content.

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

: IE8 the content property, !DOCTYPE.

+1

webkit.org : https://bugs.webkit.org/show_bug.cgi?id=17205

webkit, HTML PDF. :

css

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

, thead :

thead { display: table-header-group;}

, , ,

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

More articles:


All Articles