Click here to Skip to main content
15,847,583 members
Please Sign up or sign in to vote.
4.67/5 (3 votes)
I cannot find a a post that is similar, or even via search engine, and feel I may be barking up the wrong tree. Are web Forms just not printable?

Language: C# .net v 4
Development using WebForms

I have an application that we have written that needs to print a table, that we construct out of some complex manipulation of data from a database. If the table has more rows than fits on a single printed page how do I duplicate the header row on the top of the table when printing the page using a browser.

Do I need an addon or something?

The table is created using C# and displayed on an ASPX Web form page.
Thanks, still never sure which forum to post web form development into.

The table displays on the web page fine, it is just printing it that is a problem.
Updated 10-Jan-13 23:30pm

Hey, you could set display:table-header-group; for your headers in a @media print rule, as shown here[^].

I did a quick printing test in Firefox and IE9 and seems to do the job. Chrome for some reason doesn't honor it though.

New content added after OPs comments in Solution 2:
That's the page I used to test it - works for me in Firefox, IE and Opera:
<!DOCTYPE html>
  <style type="text/css">
  @media print {
    thead { display: table-header-group; }
  <script type="text/javascript">
  function onBodyLoad() {
    var tbl = document.getElementById("tblForPrint");
    if (tbl) {
      for (var i = 1; i < 100; i++) {
        var row = tbl.insertRow(-1);
        var cell = row.insertCell(0);
        cell.innerHTML = "Row " + i + " Cell 0";
        cell = row.insertCell(1);
        cell.innerHTML = "Row " + i + " Cell 1";
  function onPrint(btn) { = "none";
    window.print(); = "";
<body onload="onBodyLoad();">
  <input id="btnPrint" type="button" value="print" onclick="onPrint(this);" />
  <table id="tblForPrint">
        <th>Header 0</th>
        <th>Header 1</th>
        <td>Row 0 Cell 0</td>
        <td>Row 0 Cell 1</td>

As for Chrome and Safari not working ok - it is a known issue in WebKit -[^].
Good luck!
Share this answer
Warren Machanik 15-Jan-13 13:38pm    
did not get this update, I will have to make significant changes to my code (since I assemble the table manually) then I can test, thanks. I could not see a reply button so did not know how to reply, so try the comment section.
Warren Machanik 16-Jan-13 7:37am    
Hi, your code does work, however when I place it in my code (I place the css and the onPrint code) into my code it does not work. I am not sure if it is related to the why ASP is rendering tables, I have even tried to use # in the CSS. What happens is that it places the thead road in a vertical table on top of the table. I am now using Firefox and IE to test. and it does that too.

I will try and debug using their browser debug tools to see why this is the case, but at the moment I am still stuck. Thanks for the help so far.
markovl 16-Jan-13 8:14am    
What you could do is copy the output html of your table after it's been rendered (after the page has loaded use the View Source command of your browser) and paste it in the place of the table in the html I gave you. It may reduce some of the clutter and help you identify the issue faster. If you're not already, I'd suggest you try Firebug with Firefox - it has been a life-saver for me when tracking bugs like that.
Warren Machanik 16-Jan-13 9:51am    
I took the rendered code in the problem seems to be the way ASP renders the table.

<asp:Table ID="tblDeliveries" runat="server" CssClass="TblZebra" Width="100%" >
<asp:TableHeaderCell Width="90px">
Received By
<asp:TableHeaderCell Width="100px">
In Stock

is rendered with a <tr> <th> and no <thead>, I played around and found that I need to make <asp:TableHeaderRow>
<asp:TableHeaderRow TableSection="TableHeader">

Then it fixes it in Firefox, IE is a mess though. Have not tried it in Opera
@Markovl, thanks for responding

Tried that does not seem to work. I added a colour change to the header line to see if that part of the CSS was working, and the header colour changed fine, it just did not repeat the table headers on the top of the page.

Checked in Firefox, IE and Chrome, none of them worked.
Share this answer
markovl 14-Jan-13 4:34am    
Hi, I've updated my original solution to include my test page. In the future, please leave your comments and questions below the respective answer - this notifies the person who posted the solution; adding another solution doesn't.
In summary of above add

@media print {
    thead { display: table-header-group; }

To you style sheet at the bottom, then is the asp table make sure you add TableSection="TableHeader"

<asp:tableheaderrow tablesection="TableHeader" xmlns:asp="#unknown"></asp:tableheaderrow>
Share this answer

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