title: HTML table full width with margin
body: <p>I have a table:</p>
  
  <pre><code>&lt;table border=1&gt;
      &lt;caption&gt;This is a table.&lt;/caption&gt;
      &lt;tr&gt;
          &lt;th&gt;One&lt;/th&gt;
          &lt;th&gt;Two&lt;/th&gt;
          &lt;th&gt;Three&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Four&lt;/td&gt;
          &lt;td&gt;Five&lt;/td&gt;
          &lt;td&gt;Six&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and I want it to be as wide as possible while still leaving a 20px margin on each side. So, I did this:</p>
  
  <pre><code>table{
      border-collapse:collapse;
      margin:20px;
      padding:0;
      width:100%;
  }
  </code></pre>
  
  <p>but it ends up being the width of the parent plus an extra 20px margin on the left, causing a vertical scroll bar to appear. Is there any way to make it 40px less than the parent's width without adding another element to surround it?</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/pvHNM/" rel="noreferrer">http://jsfiddle.net/pvHNM/</a></p>