So I'm currently doing a side job developing a web application to help pay for Wezzle and, y'know, food and shelter.

Basically, I'm making a system that displays tables grabbed from an Oracle database using elaborate queries.  That's the easy part.  These tables need to be printed out.  That's the hard part. We'll talk about that here, specifically in relation to IE7 (the hacks here might not work for Firefox or Chrome).

(Disclaimer: This method has been found to break if the a cell has a line break in it or is wrapped to a second line).

CSS has a mechanism for handling printing.  When we link in a stylesheet with the <link> tag, we have the option to set an attribute for its media type.

For example, here's an HTML snippet that would define two stylesheets:

<link media="screen" href="styles/style.css" type="text/css" rel="stylesheet" />
<link media="print" href="styles/style.print.css" type="text/css" rel="stylesheet" />

The main thing to notice here is that media='screen' is the stylesheet for the browser, and media='print' is the stylesheet for the printer.

Why is this useful? Well, typically there are many things we want to show in a browser window but we don't want to print on a page. If we're going to print a table (and only a table) we'll need to hide our navigation bar, buttons, and rotating skull .gifs. To do that, we need to go through our print stylesheet and add in display='none' for all the elements that we don't want shown.

Once we've hidden all the non-table elements, it's time to see how our page would look printed. So we load up print preview and take a look.  Ugh, the table headers show only on the first page, but not on the ensuing pages (example ), even though we're using the <thead> tag.  Fortunately for us, this is easily corrected with the following CSS:

thead { display: table-header-group; }

With the heading problem fixed, we look again at the print preview. Everything looks a lot nicer, except for  this really ugly looking graphical problem with multi-page tables.  One solution, suggested by Xefteri, is to do away with the vertical lines in your table.

I don't think that's good enough.  So I came up with a better (albeit slower) solution using <div> tags within each of the cells and using them to put the vertical lines into the table.  This will be explained in further detail in a future post.