Click here to Skip to main content
11,413,676 members (76,078 online)
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
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

I am having same problem to display header and footer in all pages while click on print button your above code is not working, I am tried it same,

If anyone having alternate option Please let me know ?
  Permalink  
Comments
Deepu S Nair at 17-Mar-15 2:18am
   
Don't post your question as solution.
CHill60 at 17-Mar-15 7:54am
   
If you have a question of your own then use the red "Ask a Question" link - remember to include the code you have tried and explain what is not working (saying "it is not working" is not a good way to get help)
Rustam Ansari at 17-Mar-15 8:58am
   
When I Click on window.print();
Header and footer content is not repeated in each page
CHill60 at 17-Mar-15 9:08am
   
As I said, if you need help then post your own question including the code and a description of the problem. Not many people will see your "solution" and the more people that view a question the more chance you have of getting help
Rustam Ansari at 17-Mar-15 9:23am
   
<table id ="print_content" cellpadding="5" style="margin:10px 10px 10px 10px; width:95%; background: #FFFFFF; color:#333; overflow:scroll;"
cellspacing="0" runat="server">

<thead><tr><th><img id="img3" src="Images/letterhead.jpg" style="border-width:0px; width:100%; margin-top:0px;"/></th></tr></thead>


<tbody>
<tr>
<td colspan="2" style="text-align:center;font-size:25px; font-weight:700">Quotation</td>
</tr>
<tr class="Normal">
<td class="QuotationField"> </td>
<td>Reference No :  <asp:Label ID ="lblReferenceNumber" runat ="server"></td>
</tr>
<tr class="Normal">
<td class="QuotationField"> </td>
<td>Date :  <asp:Label ID ="lblQuotationDate" runat ="server"></td>
</tr>
<tr class="Normal">
<td class="QuotationField"> </td>
<td>Pages :  <asp:Label ID ="lblPages" runat ="server"></td>
</tr>
<tr class="Normal" style="border:2px solid #9CAAC1;">
<td class="QuotationField"><asp:Label ID ="lblCompanyAddress" runat="server"></td>
<td class="QuotationField" style="border-left:2px solid #9CAAC1;">
<p style="direction: ltr; text-align: left; margin-left: 1px">
<asp:Label ID ="lblClientAddress" runat ="server">
</p>
</td>
</tr>
<tr class="Field">
<td colspan="2">
<asp:GridView ID="GvQuotation" runat="server" DataKeyNames="ID" Width="100%"
EmptyDataText="No Record Found" AutoGenerateColumns="False" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black">

<asp:TemplateField HeaderText="Code">

<asp:Image ID ="ImgProduct" runat="server" Width="60" Height="50" ImageAlign="Middle" ImageUrl='<%#Bind("ImageProduct") %>' />



<asp:TemplateField HeaderText="Description">

<asp:Label ID="lblDescription" runat="server" Text='<%#Bind("Description") %>'>


<asp:TemplateField HeaderText="Quantity">

<asp:Label ID="lblQuantity" runat="server" Text='<%#Bind("Quantity") %>'>



<asp:TemplateField HeaderText="UnitPrice">

<asp:Label ID="lblUnitPrice" runat="server" Text='<%#Bind("UnitPrice") %>'>



<asp:TemplateField HeaderText="Discount">

<asp:Label ID="lblDiscountAmount" CssClass="lblMessage" ru
Rustam Ansari at 17-Mar-15 9:28am
   
<tr>
<td colspan ="2">
<table style="border:2px solid #999999; border-bottom:4px solid #999999; margin-top:-10px; width:100%">
<tr class="Normal" >
<td class ="AmountField" style="border-right:2px solid #999999;">Sub Total :<asp:Label ID ="lblTotalAmountWords" runat="server"></td>
<td class="gridtxtBox" align="right"><asp:Label ID ="lblTotalAmount" runat="server" style="font-weight: 700"></td>
</tr>
<tr class="Normal" style="border-top:2px solid #999999; border-bottom:2px solid #999999;">
<td class ="AmountField" style="border-right:2px solid #999999; font-weight: 700;">Discount :<asp:Label ID ="lblDiscountAmountWords" runat="server"></td>
<td class="gridtxtBox" align="right"><asp:Label ID ="lblDiscountAmount" CssClass="lblMessage" runat="server" style="font-weight: 700"></td>
</tr>
<tr class="Normal" style="background-color:#FBDEBB;">
<td class ="AmountField" style="border-right:2px solid #999999; font-weight: 700;">Net Total :<asp:Label ID ="lblPaidAmountWords" runat="server"></td>
<td class="gridtxtBox" align="right"><asp:Label ID ="lblPaidAmount" runat="server" style="font-weight: 700"></td>
</tr>
</table>
</td> </tr>

<tr class="Field"><td colspan="2" style="font-size:18px; font-weight:700">Terms and Conditions</td>
</tr>
<tr class="Normal"><td colspan="2"><asp:Label ID ="lblTermsandCondition" runat ="server"></td>
</tr>
<tr class="Field"><td colspan="2" style="font-size:15px; font-weight:700"><asp:Label ID ="lblProjectName" runat ="server"></td>
</tr>

<tr class="Field"><td colspan="2" style="font-size:15px; font-weight:700">Prepared By: <asp:Label ID ="lblPreparedBy" runat ="server"></td>
</tr>

<tr class="Field">
<td class="QuotationField">Page <asp:Label ID ="lblPage" runat="server"></td>
<td class="QuotationField">Reference No :
<asp:Label ID ="lblReferenceNo" runat ="server">
</td>
</tr>
</tbody>

<tfoot><tr><th><img id="img4" src="Images/letterheadfooter.jpg" style="border-width:0px; width:100%; margin-bottom:0px;"/></th></tr></tfoot>
</table>
Rustam Ansari at 17-Mar-15 9:29am
   
In the above description I want <thead></thead> and <tfoot></tfoot> repeat on all Header and footer place

<thead><tr><th><img id="img3" src="Images/letterhead.jpg" style="border-width:0px; width:100%; margin-top:0px;"/></th></tr></thead>


<tfoot><tr><th><img id="img4" src="Images/letterheadfooter.jpg" style="border-width:0px; width:100%; margin-bottom:0px;"/></th></tr></tfoot>

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

  Print Answers RSS
0 OriginalGriff 379
1 Maciej Los 210
2 Sascha Lefévre 175
3 Kornfeld Eliyahu Peter 170
4 KARTHIK Bangalore 145
0 Sergey Alexandrovich Kryukov 9,035
1 OriginalGriff 7,387
2 Maciej Los 3,640
3 Abhinav S 3,298
4 Peter Leow 3,084


Advertise | Privacy | Mobile
Web03 | 2.8.150427.2 | Last Updated 17 Mar 2015
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