title: HTML table with single 25% column uses 100% width, why?
body: <p>I have a table that dynamically gets filled by data using 4 columns.
  Each column is defined to use 25% of space.
  Works fine if the table contains at least one row with 4 data cells.
  If the dynamic data just fills one cell (1 filled cell), the column uses 100% instead of 25% of the width.</p>
  
  <p>How can this be resolved <em>without</em> adding empty cells? Is this possible somehow?</p>
  
  <p>Sample:
  <a href="http://jsfiddle.net/ydm391mz/" rel="nofollow">http://jsfiddle.net/ydm391mz/</a></p>
  
  <pre><code>&lt;div id="top"&gt;
      &lt;table&gt;
          &lt;tr&gt;&lt;td&gt;Just 25%&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>#top 
  {
      background-color:#eeeeee;
      width:100%;
  }
  #top table 
  {
      width:100%;
  }
  #top td 
  {
      width:25%;
      background-color:#aaaaaa;
  }
  </code></pre>