Click here to Skip to main content
15,072,267 members
Please Sign up or sign in to vote.
3.40/5 (3 votes)
See more:
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
Updated 7-Sep-11 21:32pm
v8
Comments
CodingLover 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 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 30-Aug-11 10:18am
   
can't you put your header and footer in your .aspx pages?
Dalek Dave 8-Sep-11 3:32am
   
Edited for Readability and Syntax.

If you use the <thead> and <tfoot> elements for your header and footer, you can use

CSS
thead   {display: table-header-group;   }

tfoot   {display: table-footer-group;   }


to force the browser to print them on every page.
   
Comments
to.areeb 8-Sep-11 3:26am
   
Thanks. Its working for me for ie, is it browser compatible?
Dalek Dave 8-Sep-11 3:33am
   
Good Answer.
imranSiddiqui.j 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>
Member 12539649 7-Dec-18 12:59pm
   
4
I tried Rick Bassham solution and it is working for me.

CSS
thead { display: table-header-group; }
tfoot { display: table-footer-group; }


XML
<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>
   
v3
Comments
sakthi sankari 5-Apr-13 1:13am
   
Thank you. it working ly in IE and Firefox. can't we do the same for chrome and safari
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 ?
   
Comments
Deepu S Nair 17-Mar-15 2:18am
   
Don't post your question as solution.
CHill60 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 17-Mar-15 8:58am
   
When I Click on window.print();
Header and footer content is not repeated in each page
CHill60 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 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">
<columns>
<asp:TemplateField HeaderText="Code">
<itemtemplate>
<asp:Image ID ="ImgProduct" runat="server" Width="60" Height="50" ImageAlign="Middle" ImageUrl='<%#Bind("ImageProduct") %>' />

<itemstyle horizontalalign="Center">

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


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

<itemstyle horizontalalign="Right">

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

<itemstyle horizontalalign="Right">

<asp:TemplateField HeaderText="Discount">
<itemtemplate>
<asp:Label ID="lblDiscountAmount" CssClass="lblMessage" ru
Member 12539649 7-Dec-18 12:59pm
   
สวง
Rustam Ansari 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>
Member 12539649 7-Dec-18 12:58pm
   
บสวง
Rustam Ansari 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>
Member 12539649 7-Dec-18 13:00pm
   
ใว

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900