title: How is column width determined in browser?
body: <p>How is the actual width of columns in table determined? 
  The code below looks (in Chrome) like this:</p>
  
  <p><img src="https://i.stack.imgur.com/D8zYg.png" alt="rendered table"></p>
  
  <p>My problem is that adding any more characters to the cell with "ddd..." the free space is not used, but the content of other cells gets wrapped. Sometime the problem is that texts "aaa..." and "ccc..." would not overlap. The total size of the table is fixed, but all the content is dynamic, so a fixed layout is not preferred.<br>
  Update: Despite containing less text than any of the actual columns the first row (c1-c4) has quite significant (possitive) effect on the final layout.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
  
  &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;style type="text/css"&gt;
          body {background:#000; color:#fff; font-family:'Tahoma'; font-weight:600; }
          .container {width:670px; }
          table {font-family:'Tahoma'; font-weight:600; border-color: #ffffff; border-width:1px; }
  
  .detail table{margin-left:20px; font-size:24px; width:650px;}
  .detail table .operational {text-align:right;}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="detail"&gt;
  
     &lt;table  border="1px" cellpadding="0px" cellspacing="0px" &gt;
        &lt;tbody&gt;
          &lt;!-- first row and borders only for debuging--&gt;
          &lt;tr&gt;
              &lt;td &gt;c1&lt;/td&gt;
              &lt;td &gt;c2&lt;/td&gt;
              &lt;td &gt;c3&lt;/td&gt;
              &lt;td &gt;c4&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr &gt;
              &lt;td class="caption"&gt;Date&lt;/td&gt;
              &lt;td class="value"&gt;17.6.2013&lt;/td&gt;
              &lt;td class="operational" colspan="2"&gt;aaaaaaaaaaaaaaaaaaaaaaa&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr &gt;
              &lt;td class="caption"&gt;bbbbbbbb&lt;/td&gt;
              &lt;td class="value" colspan="2"&gt;ccccccccccccccc ccc&lt;/td&gt;
              &lt;td class="operational"&gt;dddddddddddddd&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr &gt;
              &lt;td class="caption"&gt;bbbbbb bbb&lt;/td&gt;
              &lt;td class="value" colspan="3"&gt;eeeeeeeeeeeeeeeeeeeeeeeeeeeee&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr &gt;
              &lt;td class="caption"&gt;bbb bbbbbb&lt;/td&gt;
              &lt;td class="value" colspan="3"&gt;xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx&lt;/td&gt;
          &lt;/tr&gt;   
        &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>