Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
See more: ASP.NET HTML C#4.0
I have html table which is dynamically generated.
I want to print this table, which consists lot of pages, but when I used window.print() it's printing into 7, 8 pages.
My problem is I need Header and footer on each page (A4 size).
How can I set header and footer to each page?
I am using with C#.
I put header and footer on .aspx page but the problem is that data is binding dynamic, when I print them, the print goes on multiple pages (ie 4 or 5 pages depend on data).
So header come on first page and footer on last page I need header and footer on each page.
Please provide me any suggestion or alternate way to do this task.
Posted 30-Aug-11 4:29am
Edited 7-Sep-11 22:32pm
CodingLover at 30-Aug-11 10:18am
Using C#, how did you print the pages right now? Can you explain bit more about that. So we can comment easily on it.
Uday P.Singh at 30-Aug-11 10:21am
OP is using window.print(), which is a javascript function that prints the contents of the current window.
Uday P.Singh at 30-Aug-11 10:18am
can't you put your header and footer in your .aspx pages?
Dalek Dave at 8-Sep-11 3:32am
Edited for Readability and Syntax.
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

If you use the <thead> and <tfoot> elements for your header and footer, you can use
thead   {display: table-header-group;   }
tfoot   {display: table-footer-group;   }
to force the browser to print them on every page.
to.areeb at 8-Sep-11 3:26am
Thanks. Its working for me for ie, is it browser compatible?
Dalek Dave at 8-Sep-11 3:33am
Good Answer.
imranSiddiqui.j at 25-Nov-12 3:22am
I tried with the above html code but not displaying header in mutilple pages
<tr class="header">
<td width="25%" rowspan="2">
<img border="0" src="images/Logo.jpg" width="155" style="height: 51px"></td>
<td> </td>
<td width="24%" rowspan="2" style="width: 0%">
<img border="0" src="images/1.jpg"
style="height: 51px; width: 73px;">
<td width="24%" rowspan="2" style="width: 12%">
<img border="0" src="images/ISO.jpg"
style="height: 51px; width: 73px;"> </td>
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

I tried Rick Bassham solution and it is working for me.
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
   <thead><tr><td>Your header goes here</td></tr></thead>
     Page body in here -- as long as it needs to be
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>

If you want header and footer appear only on print copy then use this

<style type="text/css">
@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
@media screen {
thead { display: block; }
tfoot { display: block; }
sakthi sankari at 5-Apr-13 1:13am
Thank you. it working ly in IE and Firefox. can't we do the same for chrome and safari

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 213
1 ProgramFOX 205
2 Sergey Alexandrovich Kryukov 173
3 Peter Leow 150
4 Maciej Los 105
0 OriginalGriff 213
1 ProgramFOX 205
2 Sergey Alexandrovich Kryukov 183
3 Peter Leow 150
4 Dave Kreskowiak 101

Advertise | Privacy | Mobile
Web04 | 2.8.150301.1 | Last Updated 8 Sep 2011
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100