spazio tra i div - mostra la cella della tabella

Ho qui due div:

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

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

C'è un modo per fare spazio tra questi due div (che hanno display:table-cell)?

Puoi usare la border-spacingproprietà:

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

Qualche altra opzione?

Beh , non proprio.

Perché?

• marginla proprietà non è applicabile agli display: table-cellelementi.
• padding la proprietà non crea spazio tra i bordi delle celle.
• floatproprietà distrugge il comportamento atteso di table-cellelementi che possono essere alti quanto il loro elemento genitore.

Se possibile, usa bordi trasparenti.

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

Spiegazione

È possibile utilizzare la border-spacingproprietà, come suggerisce la risposta accettata, ma ciò non solo genera spazio tra le celle della tabella ma anche tra le celle della tabella e il contenitore della tabella. Questo potrebbe essere indesiderato.

Se non hai bisogno di bordi visibili sulle celle della tabella, dovresti quindi utilizzare i transparentbordi per generare i margini delle celle. I bordi trasparenti richiedono un'impostazione background-clip: padding-box;perché altrimenti il ​​colore di sfondo delle celle della tabella viene visualizzato sul bordo.

I bordi trasparenti e la clip di sfondo sono supportati in IE9 e versioni successive (e tutti gli altri browser moderni). Se hai bisogno della compatibilità con IE8 o non hai bisogno di uno spazio trasparente effettivo, puoi semplicemente impostare un colore del bordo bianco e lasciare background-clipfuori.

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

Bene, quanto sopra funziona, ecco la mia soluzione che richiede un po 'meno di markup ed è più flessibile.

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

Crea un nuovo div con qualsiasi nome (userò solo table-split) e dagli una larghezza, senza aggiungere contenuto, mentre lo metti tra i div necessari che devono essere separati.

Puoi aggiungere la larghezza che ritieni necessaria. Ho usato solo lo 0,6% perché è ciò di cui avevo bisogno quando dovevo farlo.

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

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