Leerzeichen zwischen divs - Tabellenzelle anzeigen

Ich habe hier zwei Divs:

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

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

Gibt es eine Möglichkeit, Platz zwischen diesen beiden Divs zu schaffen display:table-cell?

Sie können border-spacingEigenschaft verwenden:

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

Irgendeine andere Option?

Nun , nicht wirklich.

Warum?

• marginEigentum ist nicht anwendbar auf display: table-cellElemente.
• padding Die Eigenschaft schafft keinen Platz zwischen den Kanten der Zellen.
• floatEigenschaft zerstört das erwartete Verhalten von table-cellElementen, die so groß sein können wie ihr übergeordnetes Element.

Verwenden Sie nach Möglichkeit transparente Ränder.

JSFiddle Demo

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

Erläuterung

Sie können die border-spacingEigenschaft verwenden, wie aus der akzeptierten Antwort hervorgeht. Dadurch wird jedoch nicht nur Platz zwischen den Tabellenzellen, sondern auch zwischen den Tabellenzellen und dem Tabellencontainer generiert. Dies kann unerwünscht sein.

Wenn Sie keine sichtbaren Ränder für Ihre Tabellenzellen benötigen, sollten Sie daher transparentRänder verwenden, um Zellränder zu generieren. Transparente Ränder müssen eingestellt werden, background-clip: padding-box;da sonst die Hintergrundfarbe der Tabellenzellen am Rand angezeigt wird.

Transparente Ränder und Hintergrundclips werden ab IE9 (und allen anderen modernen Browsern) unterstützt. Wenn Sie IE8-Kompatibilität benötigen oder keinen transparenten Raum benötigen, können Sie einfach eine weiße Rahmenfarbe festlegen und diese weglassen 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>

Nun, das oben genannte funktioniert, hier ist meine Lösung, die etwas weniger Markup erfordert und flexibler ist.

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

Erstellen Sie ein neues Div mit einem beliebigen Namen (ich verwende nur Tabellensplit) und geben Sie ihm eine Breite, ohne Inhalt hinzuzufügen, während Sie es zwischen den erforderlichen Divs platzieren, die getrennt werden müssen.

Sie können die gewünschte Breite hinzufügen. Ich habe nur 0,6% verwendet, weil es das ist, wofür ich es brauchte, als ich das tun musste.

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

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