CSS table right margin in scrollable div

Question

I have div with "overflow: scroll" and fixed-size table inside.
I need to add empty space below and on the right of the table.
I'm using following code, however it adds space only below table, right margin doesn't work for some reason...

Is it possible without changing html structure?

<style>
  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;
  }
</style>
<div>
  <table>
    <tr><td>a</td></tr>
    <tr><td>b</td></tr>
    <tr><td>c</td></tr>
    <tr><td>d</td></tr>
  </table>
</div>

JSFiddle: http://jsfiddle.net/7cdzh0cn/

Also I have tried adding paddings to DIV however they don't work - DIV only increases in size.

Note: 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.

Answer 1

You could reset the default display:table to inline-table.

table {
  display: inline-table;
}

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
    overflow: scroll;
}
table {
    display: inline-table;
    table-layout: fixed;
    background: red;
    margin-bottom: 20px;
    margin-right: 20px;
}
td {
    min-width: 150px;
    max-width: 150px;
}

<div>
    <table>
        <tr><td>a</td></tr>
        <tr><td>b</td></tr>
        <tr><td>c</td></tr>
        <tr><td>d</td></tr>
    </table>
</div>