CSS表右边距在可滚动div [英] CSS table right margin in scrollable div

问题描述

我有溢出：滚动和固定大小的表里面的div。

我需要在表的右下方和右侧添加空白区域。

I' m

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

在不改变html结构的情况下是否可能？

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/

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

此外，我已经尝试添加paddings到DIV，但是他们不工作 - DIV只增加在尺寸方面。

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

请注意：我不想更改DIV的大小或表格的大小 - 它们应该保持不变。

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.

推荐答案

您可以重置默认值 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>

这篇关于CSS表右边距在可滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！