div間のスペース-表示テーブルセル

ここには2つのdivがあります。

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

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

これらの2つのdiv（を持つdisplay:table-cell）の間にスペースを作る方法はありますか？

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デモ

他のオプションはありますか？

まあ、そうではありません。

どうして？

• marginプロパティはdisplay: table-cell要素には適用されません。
• padding プロパティは、セルの端の間にスペースを作成しません。
• floatプロパティは、table-cell親要素と同じ高さにできる要素の予想される動作を破棄します。

可能であれば、透明な境界線を使用してください。

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。

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

さて、上記は機能しますが、ここでは少し必要なマークアップが少なく、より柔軟な私の解決策を示します。

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

任意の名前で新しいdivを作成し（私はtable-splitを使用します）、コンテンツを追加せずに幅を指定し、分離する必要のあるdivの間に配置します。

必要に応じて幅を追加できます。0.6％を使用したのは、これを行う必要があるときに必要だったからです。

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

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