可滚动div中的CSS表右边距

Question

我有div"overflow:scroll"和固定大小的表.
我需要在表格的右下方添加空白区域.
我正在使用以下代码,但它只在表格下方添加空间,右边距因某些原因不起作用...

是否可以不改变html结构？

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

此外,我尝试向DIV添加填充但是它们不起作用 - DIV只增加了大小.

注意:我不希望更改DIV的大小或表的大小 - 它们应该保持不变.我只想在桌子右侧和下方之后清空DIV内的空间.

Answer 1

您可以将默认值重置display:table为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>