How to Print a Repeating Header from the Browser

This post should also be called, “Damnit, Internet Explorer: you sneaky bastard.”

Scenario

We have an oldish web data entry system for a client we recently updated. One of the features of this site is the ability to print a “Report,” curating previously-entered data. These Reports have a header with specific information about each report, and it was necessary for these headers to repeat on each page of said report.

Specifications

Print the same header at the top of every Report page
Print it from the browser
HTML page to print includes several Reports on one page. Therefore, we need something that
- Repeats the Report’s header only on the pages for that Report
- Reports shouldn’t appear on the same printed pages; there needs to be a page break between each Report.

Basically, something like this:

Enter the problem

No PHP or Open Source

This system was created in Visual Studio (i.e. the bane of my existence) a million years ago on ASP.NET/C#, and as our client has the slimmest shoestring budget known in the public sector, it had to remain. No PHP. No open source platforms.

No Money

Further, we had zero dollars to spend on PDF-generating book publisher software and no PHP to deploy open-source options. Plus, we were basically doing these updates for free. On a rush.

@page: you keep me wishing

After scouring the Internet for days, I thought I was going to find a solution in a combination of @page, margin-boxes and css-generated content().

I found these tutorials from Smashing Mag very promising:

It seemed simple enough: use @page and the margin-box model to specify content, divs, page numbers, etc. for @media print. Hooray!

Maybe one day?

Tested in Chrome: nothing. Tested in Firefox: zilch. Tested in IE: nada!

I can’t quite figure out if @page is old technology or things yet to come. Some resources I found made it seem like it was CSS for very specific, non-browser uses or something that was supported, but not anymore.

I have no idea. I tested, tested, tested. Some things would work in Firefox, but not everything. Somethings would work in Chrome, but only on Mac. But nothing that could be trusted for client deployment.

Anyone have any thoughts about this? Have you found a successful, cross-browser way to use @page for this type of problem?

Please let me know in the comments if you have!

Blast from the Past: Using Tables for Structure

To my and everyone on my team’s surprise, the most useful method of getting repeating headers when printing out reports from the browser was a table.

That’s right, an old-school, 1994 table layout like I was building my first geocities site. Building a huge table to contain everything in super tall <td>s. TABLES!

Well…that’s not total, 100% true, because I utilized @media print and some regular old <div> containers, but still! TABLES!

And to further my disbelief, this only works in Internet Explorer or Firefox on Windows! INTERNET EXPLORER! IE, you sneaky, stupid jerk!

Jimmy-rigging the `thead`

Turns out, IE and Firefox will repeat the thead on every page a table appears when the table spreads over more than one page. Excel also has this options, as do most spreadsheet software, I think, going back to the beginning of digital spreadsheets.

In the traditional sense, this means if you have a giant HTML table with accounting information, for example, you column headers will appear at the top of every printed page. Handy!

After reading some more Stacks about table layouts, I figured out if I put the information I needed to repeat within a thead of a larger table, I could trick the browser into printing it on each page.

Show us the code already!

Building the layout table

Each Report has its own table, which is used as an identifier in the CSS and as the layout in the HTML. Here, it’s the class .report-container.

This table contains three sections, two of which can repeat on each printed page:

<thead> Repeats
<tfoot> Repeats
<tbody> Does not repeat

Here’s the basic set-up

<table class="report-container">
  <thead class="report-header"> </thead>
  <tfoot class="report-footer"> </tfoot>
  <tbody class="report-content"> </tbody>
</table>

Here’s a visualization of the layout:

Each Report is wrapped in the <table class="report-container">, with the repeating information inside <thead>.

Creating the Header

Everything we want to repeat at the top of each printed page will go inside a row and cell of <thead>.

In our case, I put everything inside a <div> inside the cell inside the row inside of <thead>, just so I could control more things for our client and their specifications.

<thead class="report-header">
   <tr>
      <th>
         <div class="header-info">
         ...
         </div>
      </th>
   </tr>
</thead>

Things to note:

There’s only one cell/column, <th>, and one row, <tr>, in my example, but really could have as many as you need.
Every <th> must live inside a <tr>, though, to work
<thead> must appear first in your <table>
You can really have whatever you want appear in the <div class="header-info"> within the <th>, including other tables. It’s like it’s 1996 again!

Adding a Footer

You can also utilize the <tfoot> tag to display content at the bottom of every page. In the combination of <tfoot>and CSS, you can style it however you want, including applying margins, :after / :before pseudo-classes and positioning.

<tfoot class="report-footer">  
   <tr> 
      <td>
        <div class="footer-info">
        ...
        </div>
      </td>
   </tr>
</tfoot>

! Very Important! <tfoot> must be after <thead> but before <tbody>, even though it renders after <tbody>.

Creating the Main Content Area

All of the information you don’t need to repeat simply goes in the tbody tag within the table. I contain all of this in a div. Again, this can be whatever you need it to be!

<tbody class="report-content"> 
   <tr> 
      <td>
        <div class="main">
            ...
        </div>
      </td>
   </tr>
</tbody>

Notice that my tbody only has one tr and td. Because we only use the tbody here for structure, not content, it’s not necessary to use it like a traditional table, with several rows and cells.

!important CSS

Most of the important CSS necessary for repeating the headers can be applied inside @media print. This is handy because you can still format all your HTML for the screen while making things look nice when they’re printed.

`display:table-header-group;`

However, to insure the thead and tfoot repeat, we need to change their display: property. I put this with all the regular CSS, not within @media print.

/*CSS*/
thead.report-header {
   display: table-header-group;
}

tfoot.report-footer {
   display:table-footer-group;
}

See how using the classes on thead and tfoot come in handy? Really, the display:table-*-group is just a back-up method of forcing the browser to treat the thead and tfoot like theads and tfoots. They’re not necessary, but very helpful.

`page-break-after: always;`

The last thing we needed to do was to make sure the printed pages broke after each Report, keeping all the pages for a specific report together and so each Report could be separated from the others.

Using the .report-container class on our Report table, we can add page-break-after: always to cause the printed pages to break after each Report is printed.

/* Css */

tabel.report-container {
    page-break-after: always;
}

Page breaks can be applied to almost anything, and you can specify -before or -after. They seem like they would be really handy in more print-first applications.

Here’s where the page would break when printing:

Which results in our desired layout when printing:

Putting it all together

Here’s all the table layout and CSS code for the repeating headers.

HTML Table Structure

<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
            ...
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           ...
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            ...
            </div>
          </td>
       </tr>
     </tbody>
</table>

CSS

table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
}

What do you think?

Have you ever tried any other method of repeating content on printed pages from the browser? Let me know!

How to Print a Repeating Header from the Browser

Scenario

Specifications

Enter the problem

No PHP or Open Source

No Money

@page: you keep me wishing

Maybe one day?

Blast from the Past: Using Tables for Structure

Jimmy-rigging the `thead`

Show us the code already!

Building the layout table

Creating the Header

Things to note:

Adding a Footer

Creating the Main Content Area

!important CSS

`display:table-header-group;`

`page-break-after: always;`

Putting it all together

HTML Table Structure

CSS

What do you think?

39 Comments

Leave a Reply Cancel reply

Scenario

Specifications

Enter the problem

No PHP or Open Source

No Money

@page: you keep me wishing

Maybe one day?

Blast from the Past: Using Tables for Structure

Jimmy-rigging the thead

Show us the code already!

Building the layout table

Creating the Header

Things to note:

Adding a Footer

Creating the Main Content Area

!important CSS

display:table-header-group;

page-break-after: always;

Putting it all together

HTML Table Structure

CSS

What do you think?

39 Comments

Leave a Reply Cancel reply

Jimmy-rigging the `thead`

`display:table-header-group;`

`page-break-after: always;`