title: Table of width 100% not filling parent <div>
body: <p>A table of width 100% is not filling its parent div.</p>
  
  <p>Example html:</p>
  
  <pre><code>&lt;div style="width:100%; margin-top:20px;"&gt;
      &lt;div style="width:100%; padding:5px; background:#ccc; font-weight:900;"&gt;Table Top&lt;/div&gt;
      &lt;table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #aaa;"&gt;
          &lt;tr style="background:#eee;"&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;L&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;B&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;H&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;W&lt;/strong&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr style="background:#fafafa;"&gt;
              &lt;td style="border:1px solid #ccc; border-width:1px 1px 0 0;"&gt;
                  Unit 1
              &lt;/td&gt;
              &lt;td style="border:1px solid #ccc; border-width:1px 1px 0 0;"&gt;
                  550 mm
              &lt;/td&gt;
              &lt;td style="border:1px solid #ccc; border-width:1px 1px 0 0;"&gt;
                  550 mm
              &lt;/td&gt;
              &lt;td style="border:1px solid #ccc; border-width:1px 1px 0 0;"&gt;
                  25 mm
              &lt;/td&gt;
              &lt;td style="border:1px solid #ccc; border-width:1px 0 0 0;"&gt;
                  60.00 kg
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This produces the following output:</p>
  
  <p><img src="https://i.stack.imgur.com/ZucZB.jpg" alt="alt text"></p>
  
  <p>The table is not filling the div. What could be the problem?  </p>