Firefox 4 and table-layout: fixed

I have an issue which seems to have been introduced between Firefox 3 and 4. Essentially it's to do with table-layout: fixed开发者_如何学Python.

I have a scrollable table which uses two DIVs, one for the header and one for the body (sadly it's the only option which worked for me).

The body table looks something like this (note that this is all generated with JavaScript, it's part of a GWT application):

<table style="table-layout: fixed;">
    <colgroup>
        <col width="61" />
        <col width="57" />
    </colgroup>
    <tbody>
        <!-- data -->
    </tbody>
</table>

(by the way, the page is declared as HTML 4.01 Transitional)

It seems that in Firefox 3, the column widths are being respected. However, in Firefox 4 it seems to ignore the column widths some of the time (difficult to pin down exactly but generally when the table starts getting small enough for it to be tricky for Firefox to resize). If I inspect the column widths in Firefox they generally have little relation to the widths as specified in the HTML.

I'm just wondering if anyone can shed any light on why this might be happening?

---

The first thing is to make sure your markup validates. You use " />" style SHORTTAG, which is not valid in HTML 4.01 (those closures are only valid in XHTML).

I don't know if the unexpected shorttag will force the browser into "Quirks Mode" (check Page Info... has it?)? Quirks Mode is death to troubleshooting.

If your FireFox has the Web Developer extension installed, I would inspect the table and everything inside it... it could be something is pushing at the walls of the column.

I can't take further guesses at the problem.. not enough data. It would be helpful if you save the complete HTML from the browser (then carefully strip out unnecessary or confidental bits), and then verify the problem still occurs in the simpler use case. If so, post that use case on the web somewhere and people can inspect it.

Other than the short tags, you have not revealed you are doing anything wrong. But as I suggested, there's probably something going on inside the table body...

---

Why don't you use this:

display:table;
posiiton:fixed;

And for the col-tag use the CSS:

<col style="width:61px;" />
<col style="width:57px;" />

---

You may need px after the number in FF 4. Test this:

    <col width="61px" />
    <col width="57px" />