title: Table layout problem - Firefox versus Chrome and IE7
body: <p>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).</p>
  
  <p>I have the table inside a div:</p>
  
  <pre><code>&lt;div id="listcontainer"&gt;
    &lt;table class="tasklist"&gt;
      &lt;colgroup&gt;
        &lt;col class="narrow" /&gt;
        &lt;col class="wide" /&gt;
        {{ more column definitions here }}
      &lt;/colgroup&gt;
  {{ various code here }}
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I've got css for the div and table:</p>
  
  <pre><code>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; 
  }
  </code></pre>
  
  <p>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 <em>not</em> what I want.  What am I doing wrong?</p>
  
  <p><strong>EDIT:</strong> I put the min-width elements on the <code>th</code> and <code>td</code> 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 <em>calculated style</em> has rendered the column widths to fit inside the div...</p>