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;
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

div，没有正确的width。将120px（20px添加到保证金中），并将表格调整为100px这项工作。

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

删除div的width属性。一切都会按预期正常工作。

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

Answer 4

您需要在表格样式中添加 padding-left

替换你的表css

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

这里是jsfiffle演示： http://jsfiddle.net/sL8zxLbn/

可滚动div

4 个答案: