how do i print HTML table. Header and footer on each page

Question

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 30-Aug-11 3:29am

to.areeb

Updated 7-Sep-11 21:32pm

Dalek Dave

v8

Add a Solution

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.

3 solutions

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 ?

Posted 16-Mar-15 20:09pm

Rustam Ansari

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

ใว

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Rick Bassham · Accepted Answer · 2011-09-02T11:09:00

Solution 1

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.

Posted 2-Sep-11 11:09am

Rick Bassham

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

to.areeb · Accepted Answer · 2011-09-07T21:30:00

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>

how do i print HTML table. Header and footer on each page

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us