Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
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 22:53pm
Edited 10-Jan-13 23:30pm
markovl4.4K
v2
Rate this: bad
good
Please Sign up or sign in to vote.

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:
<!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!
  Permalink  
v4
Comments
Warren Machanik at 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 at 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 at 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 at 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>To
<asp:TableHeaderCell Width="90px">
Received By

<asp:TableHeaderCell Width="100px">
Signature

<asp:TableHeaderCell>
Items

<asp:TableHeaderCell>
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
Rate this: bad
good
Please Sign up or sign in to vote.

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.
  Permalink  
Comments
markovl at 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.
Rate this: bad
good
Please Sign up or sign in to vote.

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>
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 240
1 Kamal Rocks 184
2 PIEBALDconsult 150
3 BillWoodruff 148
4 Jochen Arndt 135
0 OriginalGriff 5,695
1 DamithSL 4,506
2 Maciej Los 4,007
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,190


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 16 Jan 2013
Copyright © CodeProject, 1999-2014
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