Table layout problem - Firefox versus Chrome and IE7

Question

I'm trying to layout an HTML table (it's tabular data) and it is rendering differently in Firefox 3.5 and Chrome 2.0.172 (EDIT and IE7 - which renders the table like Chrome does).

I have the table inside a div:

<div id="listcontainer">
  <table class="tasklist">
    <colgroup>
      <col class="narrow" />
      <col class="wide" />
      {{ more column definitions here }}
    </colgroup>
{{ various code here }}
  </table>
</div>

And I've got css for the div and table:

div#listcontainer {
    position: relative;
    float: left;
    width: 98%;
    padding: 0;
    border: 1px;
    overflow-x: scroll;
}

table.tasklist {
    width: auto;
    table-layout: auto;
    border: thin solid;
    font-size: 9pt;
    border-collapse: collapse;
    empty-cells: show;
}

col.narrow {
    min-width: 50px; 
}
col.wide {
    min-width: 200px; 
}

In Firefox, the table renders wider than the containing div, and the scrollbar on the div allows the user to scroll over to the additional columns (which is the intended action). However, Chrome and IE7 appear to ignore the min-width property of the columns and crams the whole table into the containing div. Which is not what I want. What am I doing wrong?

EDIT: I put the min-width elements on the th and td elements themselves instead of using colgroup, and then it renders as expected in all three browsers. Using cols, inspecting the elements in Chrome indicates that the calculated style has rendered the column widths to fit inside the div...

Answer 1

I don't know about chrome, but I believe that IE7 requires an explicit "width: auto;" on elements for it to properly handle "min-width". This does not appear to be documented on msdn, however it seems to come up on google.

http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
http://msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx

(Also, there are some constraints on using min-width with tables and colgroups, so what you're after might not actually be possible.)