title: How is extra width in a table divided up among columns?
body: <p>I was wondering today how it is that excess space in an HTML table (above and beyond what the content is requesting) is split among the columns. Surprisingly I couldn't find the answer even after a good deal of googleing. So I quickly mocked up the simplest possible page and put it to the test.</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
      &lt;style type="text/css"&gt;
          td, div{
              border: 1px solid black;   
          }
      &lt;/style&gt;
  &lt;/head&gt;&lt;body&gt;
      &lt;table width=500&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;div style="width: 200px;"&gt;Big td&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div style="width: 100px;"&gt;Small td&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>The result (in google chrome) looks like this:
  <img src="https://i.stack.imgur.com/HolXa.png" alt="how extra space is allocated in a table"></p>
  
  <p>Based on that it seems that browsers allocate the additional space proportionally. Giving columns a percentage of the additional space proportional to the amount of space they originally requested. With that in mind, this post serves three purposes:</p>
  
  <ol>
  <li>A place where this behavior is documented for others to find</li>
  <li>I'm wondering, is this true for all browsers? (try it on yours)</li>
  <li>And here's the real question, is there a way to use CSS to change this behavior? Specifically to have the browser allocate the extra width evenly among the columns?</li>
  </ol>