title: CSS table right margin in scrollable div
body: <p>I have div with "overflow: scroll" and fixed-size table inside.<br>
  I need to add empty space below and on the right of the table.<br>
  I'm using following code, however it adds space only below table, right margin doesn't work for some reason...</p>
  
  <p>Is it possible without changing html structure?</p>
  
  <pre><code>&lt;style&gt;
    div{
      display: inline-block;
      width: 100px;
      height: 100px;
      background: blue;
      overflow: scroll;
    }
    table{
      table-layout: fixed;
      background: red;
      margin-bottom: 20px; /* working */
      margin-right: 20px; /* not working */
    }
    td{
      min-width: 150px;
      max-width: 150px;
    }
  &lt;/style&gt;
  &lt;div&gt;
    &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;a&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;b&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;c&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;d&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/7cdzh0cn/" rel="nofollow">http://jsfiddle.net/7cdzh0cn/</a></p>
  
  <p>Also I have tried adding paddings to DIV however they don't work - DIV only increases in size.  </p>
  
  <p><strong>Note</strong>: I don't want change size of DIV or size of table - they should stay the same. Only thing I want to empty space inside DIV after table on the right and below it.</p>