Printing web forms with repeatable table headers and proper page breaks

Question

4.67/5 (3 votes)

See more:

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.

Posted 10-Jan-13 21:53pm

Warren Machanik

Updated 10-Jan-13 22:30pm

markovl

v2

Add a Solution

3 solutions

Solution 1

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:

HTML

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  @media print {
    thead { display: table-header-group; }
  }
  </style>
  <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) {
    btn.style.display = "none";
    window.print();
    btn.style.display = "";
  }
  </script>
</head>
<body onload="onBodyLoad();">
  <input id="btnPrint" type="button" value="print" onclick="onPrint(this);" />
  <table id="tblForPrint">
    <thead>
      <tr>
        <th>Header 0</th>
        <th>Header 1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 0 Cell 0</td>
        <td>Row 0 Cell 1</td>
      <tr>
    </tbody>
  </table>
</body>
</html>

As for Chrome and Safari not working ok - it is a known issue in WebKit - https://bugs.webkit.org/show_bug.cgi?id=17205[^].
Good luck!

Posted 10-Jan-13 22:23pm

markovl

Updated 13-Jan-13 22:39pm

v4

Comments

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:TableHeaderRow>
        <asp:TableHeaderCell>By</asp:TableHeaderCell>
        <asp:TableHeaderCell>To</asp:TableHeaderCell>
        <asp:TableHeaderCell Width="90px">
          Received By
        </asp:TableHeaderCell>
        <asp:TableHeaderCell Width="100px">
          Signature
        </asp:TableHeaderCell>
        <asp:TableHeaderCell>
          Items
        </asp:TableHeaderCell>
        <asp:TableHeaderCell>
          In Stock
        </asp:TableHeaderCell>
      </asp:TableHeaderRow>
    </asp:Table>

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

Solution 3

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"

eg:

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

Posted 16-Jan-13 3:53am

Warren Machanik

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)

Warren Machanik · Accepted Answer · 2013-01-11T02:34:00

Solution 2

@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.

Posted 11-Jan-13 2:34am

Warren Machanik

Comments

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.