title: How do I get Html Table to respect margins when its width is set to 100%?
body: <p>I'm struggling to get an Html Table to fill the width of a container, and respect margins without overflowing.</p>
  
  <p>This sample (see <a href="https://jsfiddle.net/v6o12u9o/" rel="nofollow">https://jsfiddle.net/v6o12u9o/</a>) sets a table's width to 100%, but because of the margin, the table overflows its parent's borders. How do I fix this?</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div style="border: 1px solid red; margin:10px;"&gt;
  &lt;table border=1&gt;
      &lt;tr&gt;
          &lt;td&gt;
              First cell.
          &lt;/td&gt;
          &lt;td&gt;
              Second cell.
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>table {
      margin: 20px;
      background-color: yellow;
      width:100%;
  }
  
  td {
      width: 50%;
  }
  </code></pre>
  
  <p>Some other things I've tried:</p>
  
  <ul>
  <li>Setting margin-right to 40px. Margin-right is ignored.</li>
  <li>Setting padding-right instead. This makes the cells smaller, but the table stays at 100% width.</li>
  <li>Setting table's display to "block". This makes the table the correct size, but then cells are too small (I tried setting "block" on the cells, no luck)</li>
  </ul>