显示：表格单元格边距

Question

我有2个

，它们的样式为display: table-cell，我需要在它们之间添加空格。

对于第二个

，margin-left: 5px不起作用。

我已经看到了为什么带有"display: table-cell;"的

不受margin影响？答案，但我的问题不是关于如何在单元格周围添加边框，而是在一个具体的单元格（右侧的绿色

）设置左边距（而不是填充！）

将绿色

设置为

display: table;
border-collapse: separate;
border-spacing: 10px;

这将导致空间不仅在单元格之间存在，而且围绕所有单元格存在，这是不可取的...

如何进行？

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

- serhio

---

我投票重新开放这个问题，因为它询问“如何在旁边添加空格或边距”，而不是“为什么没有发生”。http://jsfiddle.net/jf5zt2xh/5/ - G-Cyrillus

@Quentin，请查看我编辑过的问题。 - serhio

请参考此帖子。 - LF00

Answer 1

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

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

{{链接1：JSFiddle}}

- kris14an

---

谢谢！你的想法引导了我得到了这个对我来说还不错的解决方案：http://jsfiddle.net/jf5zt2xh/6/ - serhio

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>

- Alexander Dayan

Answer 3

尝试这个解决方案：

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

- Dzmitry Kulahin

Answer 4

如果你需要让你的div具有"display: table-cell"属性，那么你需要使用一个解决办法来实现你所期望的效果。请参考"为什么带有“display：table-cell”的div不受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版本小于10，Flexbox可以是一个解决方案。

- mmgross

Answer 5

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

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

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

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

- G-Cyrillus