Question

我有2个div作为display: table-cell。我需要他们之间的空间。

第二个div的

margin-left: 5px不起作用。

我已经看到了 Why is a div with "display: table-cell;" not affected by margin?答案，但我的问题不是如何在单元格周围设置边框 ，但是对于具体的细胞（右边的），左边缘（而不是填充！）

将绿色div设置为

display: table; border-collapse: separate; border-spacing: 10px;
不仅> 细胞之间的空间，而且还包括所有细胞周围的空间，即NOK ......

如何进行？

JSFiddle：http://jsfiddle.net/9cw7rhpu/

Answer 1

尝试使用Flexbox（flexbox）分隔子元素

div.table {
    display: flex;
    justify-content: space-between;
}

JSFiddle

Answer 2

你的意思是什么？

div.table {
    border: solid 2px green;
    display: table;
    border-collapse: separate;
    width: 100%;
    height: 100px;
    margin: 10px;
    background-color: aquamarine;
}
div.cell {
    border: solid 4px red;
    display: table-cell;
}
#c1 {
    width: 400px;
    background-color: blue;
}
#c2 {
    width: 200px;
    background-color: magenta;
}

<div class="table">
    <div class="cell" id="c1"></div>
    <div class="cell" id="c2"></div>
</div>

Answer 3

如果您需要使用display:table-cell div，则需要使用变通方法以实现所需目标，请参阅"Why is a div with “display: table-cell;” not affected by margin?"

这是为表格单元格设置单个边距的可能想法：

div {
  border-style:solid;
  border-width:1px;
}

.table {
  display:table;
  border-color:green;
  width:200px;
}

.cell {
  display:table-cell;
  border-style:none;
  width:50%;
}
.cell > div {
  border-color:red;
  height:100px;
}
#c2 > div {
  margin-left:10px;
}

<div class="table">
  <div id="c1" class="cell">
    <div class="inner"></div>
  </div>
  <div id="c2" class="cell">
    <div class="inner"></div>
  </div>
</div>

这里的缺点是你必须在你的表格单元格中添加第二个div（附加标记）并给它们一个边距和边框而不是你的表格单元格。

您可能需要找到一种方法来调整内部div的高度，它们不会自动调整彼此的高度。

当然，如果你不担心IE＆lt; 10，flexbox可能是一个解决方案。

Answer 4

要保持display:table布局，您可以使用透明边框和阴影来绘制边框：

＆＃13;

div.table {
    border:solid;
    border-width:2px;
    border-color: green;
    display: table;
    border-collapse:separate;
    border-spacing:0 5px;
    width: 100%;
    height: 100px;
    margin: 10px;
    background-color: magenta;
}
div.cell {
    border:solid;
    border-width:4px;
    border-color: red;
    display: table-cell;
}
#c1 {
    width: 400px;
    background-color: blue;
    border:0 none;
    background-clip:padding-box;
    border-right:5px solid transparent;
    padding:5px;
    box-shadow:inset  0 0 0 3px red;
}
#c2 {
    width: 200px;
    background-color: magenta;
}

＆＃13;

<div class="table">
    <div class="cell" id="c1"></div>
    <div class="cell" id="c2"></div>
</div>

＆＃13;

http://jsfiddle.net/jf5zt2xh/4/

Answer 5

尝试以下解决方案：

HTML：

<div class="table">
  <div class="col">
    Column 1
  </div>
  <div class="col">
    Column 2
  </div>
</div>

CSS：

.table {
    display: table;
    border-collapse: separate;
    border-spacing: 25px; 
    width: calc(100% + 50px); 
    margin-left: -25px;
}
.col {
    display: table-cell;
}

display：table-cell margin

5 个答案: