div 之间的空间 - 显示表格单元格

Question

我这里有两个 div：

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

有没有办法在这两个 div（有display:table-cell）之间腾出空间？

Answer 1

你可以使用border-spacing属性：

HTML：

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS：

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBin Demo

还有其他选择吗？

嗯，不是真的。

为什么？

• margin 属性 is not applicable 到 display: table-cell 元素。
• padding 属性不会在单元格边缘之间创建空间。
• float 属性破坏了 table-cell 元素的预期行为，这些元素能够与其父元素一样高。

Answer 2

尽可能使用透明边框。

JSFiddle 演示

https://jsfiddle.net/74q3na62/

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

CSS

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

说明

您可以使用border-spacing 属性，正如公认的答案所暗示的那样，但这不仅会在表格单元格之间产生空间，还会在表格单元格和表格容器之间产生空间。这可能是不需要的。

如果您的表格单元格不需要可见边框，则应使用transparent 边框来生成单元格边距。透明边框需要设置background-clip: padding-box;，否则表格单元格的背景颜色会显示在边框上。

IE9 以上（以及所有其他现代浏览器）支持透明边框和背景剪辑。如果您需要 IE8 兼容性或不需要实际的透明空间，您可以简单地设置白色边框颜色并将background-clip 保留。

Answer 3

<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>

Answer 4

好吧，上面的方法确实有效，这是我的解决方案，它需要的标记更少，而且更灵活。

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}

<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>

Answer 5

用任何名称创建一个新的 div（我将只使用 table-split）并给它一个宽度，而不向它添加内容，同时将它放在需要分隔的必要 div 之间。

您可以添加任何您认为需要的宽度。我只使用了 0.6%，因为这是我必须这样做时所需要的。

.table-split {
  display: table-cell;
  width: 0.6%
}

<div class="table-split"></div>