Firefox 4 and table-layout: fixed

Question

I have an issue which seems to have been introduced between Firefox 3 and 4. Essentially it's to do with table-layout: fixed.

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?

Fiord

I don't see anything obviously wrong here, but it's hard to test with just this code snippit, especially if your application is generating it dynamically. Any chance you can give us enough code that we can reproduce the error? Then I can take a stab at fixing it. – Vowell

Note: the width attribute on COL elements is deprecated in HTML5 - that's probably the reason why FF4 (as opposed to FF3) doesn't like it... – Boxing

maybe the table cells have a content wider than defined widths? – Furtherance

Is there not a way that the code you use would generate a style attribute with value "width:61px;" instead of the width attribute? – Luxurious

It seems like FF has made an exception about the role of cols and colgroups in the case of a fixed-layout table: bugzilla.mozilla.org/show_bug.cgi?id=666493 (this very stackoverflow question is referenced in the bug report!) – Firedrake

@skybondsor: That bugzilla bug report discusses setting the width on the <colgroup> tag, not the <col> tags, so it doesn't apply in this case. – Marriage

If you can produce a small testcase showing the bug in action we can most definitely help you figure your way around it. Can you make one? – Spadiceous

Answer 1

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...

Extend

Answer 2

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;" />

Economy

Answer 3

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

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

Delk

Sadly this doesn't appear to fix the problem :( – Fiord