title: Keep Table Cell Width fixed when inside an overflow div
body: <p>Please see the code at the bottom of the post.  There is a table inside a div.  When the <code>$size</code> variable is small, like 2 or 3, and all the cells can easily fit inside the div, the width of the <code>&lt;th&gt;</code> cells are controlled correctly to have width 100px.  If you change the <code>$size</code> variable: <code>$size = 20</code>, you will see that the table <code>&lt;th&gt;</code> cells are squeezed to fit in the div, even though it has an <code>overflow:auto</code> property.  I see the same thing for <code>overflow:scroll</code>.</p>
  
  <p>What I would like to see is the table cell width remain constant at 100px, and the div introduce a scroll bar to scroll to see all cells.  I do not want the width of the cells shrinking even if the <code>$size == 1000</code>.</p>
  
  <p>How to get the table to retain the <code>width : 100px</code> even though it is bigger than the parent div?  And have the parent div be scroll-able then.</p>
  
  <pre><code>&lt;style type="text/CSS"&gt;
  
      .headrow {
          border : 1px solid;
          width : 100px;
          height : 40px;
      }
  
  table {
      table-layout: fixed;
  }
  
  &lt;/style&gt;
  
  
  &lt;div id="b" style="border:1px solid;width:585px;height:60px;overflow:auto;"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;?php
              $size = 20;
                  for ($i=0;$i&lt;$size;$i++){
                      echo '&lt;th class="headrow"&gt;&lt;/th&gt;';
                  }
              ?&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>