(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).

First, let’s start with an example table:

<table id="example-table">
  <thead>
    <tr><th>First Name</th><th>Last Name</th><th>Client #</th></tr>
  </thead>
  <tbody>
    <tr><td>Joe</td><td>Shmoe</td><td>123451</td></tr>
    <tr><td>Joe</td><td>Shmoe</td><td>123451</td></tr>
    <tr><td>Joe</td><td>Shmoe</td><td>123451</td></tr>
    <tr><td>Joe</td><td>Shmoe</td><td>123451</td></tr>
    <!-- Repeat these many times to make it go to a second page. -->
  </tbody>
</table>

Add a stylesheet like this:

#example-table
{
  border: 1px black solid;
  border-collapse: collapse;
}
 
#example-table th, #example-table td
{
  border: 1px black solid;
}

If you repeat those rows enough times you can get the graphical glitch mentioned above. Now, to fix it, what we’ll do is add a <div> tag to every cell and then make it provide the side borders.

So first, we’ll modify the table as follows:

<table id="example-table">
  <thead>
    <tr><th>First Name</th><th>Last Name</th><th>Client #</th></tr>
  </thead>
  <tbody>
    <tr>
      <td><div class="cell">Joe</div></td>
      <td><div class="cell">Shmoe</div></td>
      <td class="last-col"><div class="cell">123451</div></td>
    </tr>    
    <!-- Repeat this many times to make it go to a second page. -->
  </tbody>
</table>

What we’ve done here is added a <div> to each cell and given these <div>‘s a class called cell. This is so we can do stuff to them in our CSS stylesheet. We’ve also given the last cell in each row the class last-col. This is so we can identify the last column of each row. The reasoning for this will be explained shortly.

Now, as I’ve said, our goal here is to replace the table-provided vertical borders (the | ones) with the div-provided ones. So we need to modify the stylesheet to reflect that:

#example-table
{
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  border-collapse: collapse;
}
 
#example-table th, #example-table td
{
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}

There’s also an issue of padding. By default, tables are slightly padded, which is fine for most circumstances. However, in this case, padding would be counterproductive, it would prevent the div‘s border from matching up with the table‘s border. So that’ll have to be changed:

#example-table
{
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  border-collapse: collapse;
}
 
#example-table th, #example-table td
{
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  padding: 0;
}

Time for some div styling. Since the div is our new cell, we need to style it as such. First thing, let’s make the div provide us with sides. Now, we could do something like border-left: 1px black solid; border-right: 1px black solid;. This would look fine, except that all the vertical borders in the middle of the table would 2 pixels wide (think about it). So, instead, we’ll make all the div cells provide borders on the left side, except for the last column, which’ll provide borders on both sides (hence the purpose of the last-col class).

div.cell
{
  border-left: 1px black solid;
}
 
#example-table .last-col div.cell
{
  border-right: 1px black solid;
}

We also need to add back the padding we stripped out from the table td tags:

div.cell
{
  border-left: 1px black solid;
  padding: 4px;
}
 
#example-table .last-col div.cell
{
  border-right: 1px black solid;
}

And there you have it. Now when you load up print preview, your tables should look pretty. Here’s the final stylesheet in case you got lost:

/* So the headers will display on every page. */
thead { display: table-header-group; }
 
/* Make table only provides vertical border. */
#example-table
{
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  border-collapse: collapse;
}
 
/* 
 * Make header and normal cells only show top and bottom border,
 * and remove all padding so the div lines will match up with the table.
 */
#example-table th, #example-table td
{
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  padding: 0;
}
 
/* Make the div cell only provide the left border, and simulate table padding. */
div.cell
{
  border-left: 1px black solid;
  padding: 4px;
}
 
/* Provide the right border in the last column. */
#example-table .last-col div.cell
{
  border-right: 1px black solid;
}

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.