Click here to Skip to main content
Rate this: bad
good
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 asp.net 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
v8
Comments
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
good
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.
  Permalink  
Comments
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
<thead>
<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>
<td width="24%" rowspan="2" style="width: 12%">
<img border="0" src="images/ISO.jpg"
style="height: 51px; width: 73px;"> </td>
</tr>
</thead>
Rate this: bad
good
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; }
 
<body>
<table>
   <thead><tr><td>Your header goes here</td></tr></thead>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
</table>
</body>
 

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; }
}
 
</style>
  Permalink  
v3
Comments
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 5,170
1 DamithSL 4,357
2 Maciej Los 3,750
3 Kornfeld Eliyahu Peter 3,470
4 Sergey Alexandrovich Kryukov 2,851


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 8 Sep 2011
Copyright © CodeProject, 1999-2014
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