Css Table Right Margin In Scrollable Div

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

Solution 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>

Solution 2:

The div, haven't the correct width. Adding 120px (20px to margin), and resizing the table to 100px this work.

CSS:

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

  }

Demo

Solution 3:

Remove the width attribute for the div. Everything will work fine as expected.

div{
    display: inline-block;
    height: 100px;
    background: blue;
    overflow: scroll;
  }

Solution 4:

you need to add padding-left in your table style

replace your table css

table{
 table-layout: fixed;
 background: red;
 margin-bottom: 20px; /* working */margin-right: 20px; /* not working */padding-left: 23px;
}

here jsfiffle demo : http://jsfiddle.net/sL8zxLbn/