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 i

Answer 1

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

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

Answer 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

Answer 3

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>

Answer 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/