add header to html page in printing by css

Question

i want to print html page with modern browser and add header on every page on printing. Techniques found on the internet but does not work in modern browsers. Is there a way to do this?

i add example that not work me in modern browser.

  $(document).ready(function(){ var head = $('table thead tr'); $( "tbody tr:nth-child(10n+10)" ).after(head.clone()); });

  table{ border:none; } tr{ display:block; } td, th{ width: 100px; } tbody tr.head { page-break-before: always; page-break-inside: avoid; } @media screen { tbody .head{ display: none; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <thead> <tr class="head"> <th>Month</th> <th>Year</th> </tr> </thead> <tbody> <tr class="start"> <td>January</td> <td>2010</td> </tr> <tr> <td>February</td> <td>2010</td> </tr> <tr> <td>March</td> <td>2010</td> </tr> <tr> <td>April</td> <td>2010</td> </tr> <tr> <td>May</td> <td>2010</td> </tr> <tr> <td>June</td> <td>2010</td> </tr> <tr> <td>July</td> <td>2010</td> </tr> <tr> <td>August</td> <td>2010</td> </tr> <tr> <td>September</td> <td>2010</td> </tr> <tr> <td>October</td> <td>2010</td> </tr> <tr> <td>November</td> <td>2010</td> </tr> <tr class="end"> <td>December</td> <td>2010</td> </tr> </tbody> </table> </body>

Answer 1

Try this sample

Use media query for custom style for screen and print

CSS

 @media screen { .page-header { display: none; } .page-footer { display: none; } }

HTML code

 <body> <p class="page-header">Page header goes here</p> your Webpage main content goes here <p class="page-footer">Page footer goes here</p> </body>

add header to html page in printing by css

Question

1 answers

solution1
0 2015-09-02 09:07:38

add header to html page in printing by css

Question

1 answers

solution1 0 2015-09-02 09:07:38

solution1
0 2015-09-02 09:07:38