Firefox 3.6 doesn't print collapsed borders on last page of multi-page table

Is this a known issue? It seems like a pretty major problem, but I haven’t come across any bug reports that cover it specifically. The bug only occurs if a table cell is split by a page break-- page breaks between rows don’t cause it. Both table and cell borders are affected. The borders show up on all pages but the last, which shows the table content with no borders. The problem can easily be demonstrated by creating a simple html table, giving it some CSS borders, setting border-collapse: collapse, and filling one of the cells with enough text to ensure that a page break will occur within it. It occurs in both the print preview and the hardcopy. I’ve tested in FF 3.6.8 and in IE8 (both on Windows XP), and it only happens in FF. Does anyone know of a workaround that doesn’t involve using border-spacing: 0 in place of border-collapse: collapse? (I’ll use that solution if I have to, but it has some problems of its own).

That reminds me of another problem I’ve been having with FF: it apparently won’t allow a pagebreak inside a div that has its overflow property set to hidden. Sheesh, for a browser that doesn’t support “page-break-inside: avoid” (last I checked, anyway), it sure does offer a lot of ways to accomplish the same thing. (I believe “display: inline-block” also does it, though in that case it makes sense).

This might be true, though my limited printing experience involves forms, where IE (all versions) screwed up the top border of fieldsets all the time, meaning I ended up removing them.

Though Firefox’s numerous bugs do not surprised me, especially the old ones because now they are so deeply buried in the trunk, nobody will ever fix them. The floating-printing problem was similar to a problem with fieldsets: instead of breaking a fieldset, firefox always made it start on a new page, wasting paper. I actually never managed to fix that one: they weren’t floated.

Oh cool, that’s good to know.

Gosh, sounds suspiciously like the type of solution that would work for an IE bug :confused:

Hi,

Yes I can see the bug in FF3.6 and it seems you can fix it by adding a background color to the last row rather than adding a redundant row.

e.g.


@media print {
    tr:last-child{background:#fff}
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table {
    border-collapse: collapse;
}
td {
    border:1px solid #000;
    width:300px
}

@media print {
    tr:last-child{background:#fff}
}
</style>
</head>
<body>
<table>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>a</td>
        <td>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </td>
    </tr>
</table>
</body>
</html>


Hope that’s some use.

It appears I was mistaken about the scope of this problem. Further testing has shown that it only happens when a page break occurs in the very last row of cells in a table. Maybe that’s why not many people have bothered to report it.

The obvious solution, then, would be to add a row of empty cells after the last row, and in my testing, this actually does seem to work. The cells must have left and/or right borders set for some reason, but as long as their padding is set to zero they will be invisible.

Thanks Paul! Your solution actually makes this problem pretty trivial.

I’m sure there are plenty of people who would disagree with me, but in my experience, FF and IE sort of reverse roles when it comes to printing, and IE gets to be the more competent browser for once.