Issue with printing long table

[XwBrendanXw]

I have a bit of a problem with printing web pages in Firefox.

The page is actually an invoice, with a table containing all the details. When the page is too long for one piece of paper, instead of going on to 2 sheets it just continues off the bottom of the page into nothingness, and the rest doesn't get printed.

In IE it goes onto a second page, but it doesn't split it where the rows are, it cuts off half the text in the bottom row and puts it on the next page.

Does anyone know how I can make it print on 2 pages, properly, without breaking anything? I've tried everything I can think of.

Following is a sample of the HTML for the details part of the page. It's just a simple table, with a few CSS styles applied for borders and font, nothing special.

<table width="95%" align="center"  cellspacing="0">
  <tr>
    <td width="8%" align="center" class="invoiceheader">Date</td>
    <td width="10%" align="center" class="invoiceheader">Order No</td>

    <td width="36%" class="invoiceheader">Recipient Name</td>
    <td width="17%" align="center" class="invoiceheader">Suburb</td>
    <td width="10%" align="center" class="invoiceheader">Rate</td>
    <td width="10%" align="center" class="invoiceheader" colspan="2">Extras</td>
    <td width="9%" align="center" class="invoiceheader">Cost</td>
  </tr>

  ...

  <tr>
    <td width="8%" align="center" class="invoicerow">03/09/05</td>
    <td width="10%" align="center" class="invoicerow">00014</td>
    <td width="36%" class="invoicerow">XXXXXXXXX</td>
    <td width="17%" align="left" class="invoicerow">MORAYFIELD</td>
    <td width="10%" align="center" class="invoicerow">BUDGET</td>
    <td width="5%" align="center" class="invoicerow">&nbsp;</td>
    <td width="5%" align="right" class="invoicerow">&nbsp;</td>
    <td width="9%" align="right" class="invoicerow">$20.00</td>
  </tr>

  ...

</table>

And a screenshot of the print preview in Firefox (notice at the bottom how it continues off the page):

I hope I've explained the problem clearly enough.

Any suggestions are much appreciated...

 

[XwBrendanXw]

Well after a lot of playing around, I finally fixed the problem.

I had the main stuff on the page (ie. everything that's not the header) enclosed in a <div> tag, which had position: absolute and top: 4cm to position it correctly on the page. I changed that style to use margin-top: 4cm and no position:absolute, and now the table wraps onto the next page properly.

Old CSS:

#main-body {
	position: absolute;
	width: 18cm;
	top: 4cm;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

New CSS:

#main-body {
	width: 18cm;
	margin-top: 3.5cm;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

 

[ChrisHunt]

Yeah, absolute positioning can cause all sorts of problems - don't use it unless you have to.

In passing, you should consider replacing lines like

<td width="8%" align="center" class="invoiceheader">Date</td>

with

<[b]th[/b] width="8%">Date</[b]th[/b]>

The <th> element is intended for table headers. If your table cells can only be "invoiceheaders" or "invoicerows", using the <th> and <td> elements instead would mean you could dispense with the classes. You could also investigate the <thead> and <tbody> elements (they can be useful to apply CSS styles to).

Oh, and you only need to define column widths in the first row - the other rows will use the same widths. In summary, do something like this:

<table width="95%" align="center" cellspacing="0" class="invoice">
  <thead>
    <tr>
      <th width="8%">Date</th>
      <th width="10%">Order No</th>
      <th width="36%" style="text-align:left">Recipient Name</th>
      <th width="17%">Suburb</th>
      <th width="10%">Rate</th>
      <th width="10%" colspan="2">Extras</th>
      <th width="9%">Cost</th>
    </tr>
  </thead>
  <tbody>
  ...
    <tr>
      <td>03/09/05</td>
      <td>00014</td>
      <td>XXXXXXXXX</td>
      <td style="text-align:left" >MORAYFIELD</td>
      <td>BUDGET</td>
      <td>&nbsp;</td>
      <td style="text-align:right">&nbsp;</td>
      <td style="text-align:right">$20.00</td>
    </tr>
  ...
  </tbody>
</table>

This'll save you a little bandwidth and make your code easier to read & maintain.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[XwBrendanXw]

Thanks for your input, ChrisHunt.

The reason I am using the invoiceheader and invoicerow classes is because I have other tables on the page with different styles. I guess I could use <table id="invoice"> and #invoice.td classes though...