title: Table cells(td, th) doesn't take width given in colgroup
body: <p>I am trying to give min width to table cells using <code>col</code> element of <code>colgroup</code>. The <code>table</code> is wrapped by a <code>div</code> which has some width set(less than combined width of all cells set in <code>col</code>) and <code>overflow</code> of <code>div</code> is set to <code>auto</code>.</p>
  
  <p>Here is my html code -</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          .table-block {
              border-spacing: 0;
              border-collapse: collapse;
          }
  
          .cell {
              padding: 5px 10px;
              border: 1px solid silver;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="width:200px;overflow: auto"&gt;
      &lt;table class="table-block"&gt;
          &lt;colgroup&gt;
              &lt;col style="width:300px"&gt;
              &lt;col style="width:300px"&gt;
          &lt;/colgroup&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="cell"&gt;&lt;em&gt;2(0,2)&lt;/em&gt;&lt;/td&gt;
              &lt;td class="cell"&gt;&lt;em&gt;3(0,3)&lt;/em&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="cell"&gt;&lt;em&gt;2(0,2)&lt;/em&gt;&lt;/td&gt;
              &lt;td class="cell"&gt;&lt;em&gt;3(0,3)&lt;/em&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My problem is cells doesn't take width from <code>col</code>. It is trying to fit themselves in the wrapper <code>div</code>. I want that the cells take the proper width given and a scrollbar should appear. I have a solution that I set <code>table</code> width set to the total width I need. This would require me to update <code>table</code> width every time I insert new column by JavaScript.</p>
  
  <p>My Solution - </p>
  
  <pre><code>&lt;div style="width:200px;overflow: auto"&gt;
          &lt;table class="table-block" style="width:600px"&gt;
          &lt;!-- table things --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is it a right thing to do? And why it happens?</p>
  
  <p>jsFiddle <a href="http://jsfiddle.net/moazzam_khan/QQ86J/1/" rel="nofollow">link</a> </p>