Firefox table with fixed layout bug

Firefox 5 (haven't checked other versions) adds an extra pixel of space between the right column and the table border with this code:

<style type="text/css">
    table {
        border:  1px solid red;
        width: 805px;
        margin: auto;
        table-layout: fixed;
    }

    td {
        border: 1px solid green;
    }
</style>

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>Sun</td>
        <td>Mon</td>
        <td>Tue</td>
        <td>Wed</td>
        <td>Thu</td>
        <td>Fri</td>
        <td>Sat</td>
    </tr>
</table>

Here is a screenshot from Firefox, and one from Chrome (IE also works correctly). Look at the right side and you'll see what I'm talking about.

If I remove any of the widths, 开发者_运维技巧margins, or the table-layout properties this bug disappears. Any workarounds or fixes?

Tables in Gecko use border-box box-sizing by default. So you have a table 805px wide including the borders. This leaves 803px to be divided up between 7 cells. 803 divided by 7 is 114 with a remainder of 5.

Gecko does subpixel positioning, and in particular widths in Gecko are integer quantities in units of 1/60 pixel. So each cell's width ends up 60*5/7 = 42.857 units. This gets truncated to 42 units, not rounded, as far as I can tell. Certainly each column of the table ends up 6882 units wide, which is 114*60+42.

So you end up with the sum of the column widths being too small by 7*0.857/60 = 0.1px.

Now why this ends up with a visible seam, I'm not sure. I would have thought that rounding to the nearest integer pixel during painting would have covered up the seam...

I suspect the problem is something to do with the rounding of sub-pixel values.

If you set width: 806px on table, the problem is resolved, see: http://jsfiddle.net/Vfmnr/

Maybe someone more knowledgeable can say whether or not this is a bug in Firefox.