Firefox truncates long tables when printing

I stumbled across a weird bug in Firefox today — a bug that apparently has been around for quite some time, as it was originally reported on 2005-05-20.

If you have a table which is longer than the page, in certain situations, when printing the page, a page break is forced before the table, and only the first visible page of the table prints, with the rest of the content disappearing altogether.

The original bug report describes it rather well:

… The first [page] contains material preceding the table, the second [page] contains most but not all of the table, and the third [page] is empty.

The bug was confirmed on 2005-06-19, but no fixes followed. On 2006-07-31 a user alluded to a workaround:

From further tests, you can see that the bug happens when BOTH THE FOLLOWING
CONDITIONS are respected:

A) The page contains an <h1> title
B) The table in the page contains a <caption>caption

The web page in my project which was exhibiting this bug had an h1 at the top of the page and a caption at the top of the offending table. Removing the caption from the markup fixed the problem, as did applying the display:none style to the caption.

It’s a frustrating bug, but once you know the workaround, it’s easy to deal with.

0 thoughts on “Firefox truncates long tables when printing

  • I had a similar problem using Firefox 2.0.0.14 today. I had a long table enclosed in a DIV set to overflow: auto. When printing, it would cut off after the first page. The fix was to create a print-only stylesheet using media=”print” and target that DIV with “overflow: visible !important”. The table now spans multiple print pages cleanly.

  • My problem: truncated tables to 1 page only, with a tailing blank page.

    Cause: there was a div around the table with css property “overflow” set to “auto”. This is killing.

    Solution: set css property “overflow” set to “visible” in a print style sheet.

    This might save you a couple of hours…

  • Gavin Dodds says:

    @Drupal Development
    Thank you!!! I’ve just had this issue and your comment has saved me hours.
    My table was in a div with overflow:hidden, and height:auto (combinations of two stylesheets) and I had the cut-off display issue in print previews. Setting the div to overflow:visible cured my problem.

  • Thanks! Been looking around for the answer.
    I’ve got my table inside a div. putting overflow:hidden for that div worked for me.

  • I had this problem on ViewTrip printing e-ticket receipts. Firefox would print the first page and then a blank second page, with only the URL header and footer.

    To work around this, I saved the page locally, found the DIV enclosing the table, and changed the overflow attribute from ‘auto’ to ‘visible’ (using notepad). Then I loaded the page into Firefox again locally, and could print it in its entirety. Seems like a pretty clear FireFox bug.

  • Wow, thanks y’all… I spent a number of hours trying to solve this issue, which existed in both IE and FF. Overflow=visible fixed it.

  • So true, very frustrated about that. Cause the solution I’ve found was adding this style on my master print:

    .ff-print{float: none !important;}/*due FF print issue*/

    And that breaks my other styles.

    I’m using 3.6.13, and something similar like this.

    <table …

  • Hi,

    I also had this problem of truncated table when printing,
    The ideas written above did not help me. but it gave me more ideas…
    so, when I simply changed my tag to DIV, it solved the problem!!!

  • Had these problem and using overflow: visible and height: 100% on dynamic HTML elements worked. I have to go down a few divs to get it to work though.

  • I’m having a similar problem with IE9. It’s printing the first part of a long table, then getting to the end of the page. The next page is predominantly blank, with a short section of the table (continuing on from the part printed on the first page) at the bottom. The rest of the table isn’t printed at all. Material under the table is then printed.

    There are no caption tags or similar.

  • Yanosh Kunsh says:

    I had the following markup (zen coding style below) that didn’t print my table after the first page break in Firefox 21.0 (other browsers were doing fine).

    body>div>div>div>table.that-doesnt-fully-print

    I didn’t have any ‘overflow’ attributes set to any of the parent elements of the table, and even after I add ‘visible !important’ to all of them, the problem was still present. So I went ahead and did the opposite. In the print media CSS I put ‘* { overflow: hidden !important; }’, and everything worked like a charm.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.