espacio entre divs-tabla de visualización-celda

Use bordes transparentes si es posible.

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

Explicación

Puede usar la propiedad border-spacing, pero no solo genera espacio entre las celdas de la tabla, sino también entre las celdas de la tabla y el contenedor de la tabla.

Si no necesita bordes visibles en las celdas de la tabla, debe usar transparent bordes para generar celdas margen. Los bordes transparentes requieren la configuración background-clip: padding-box; porque, de lo contrario, el color de fondo de las celdas de la tabla se muestra en el borde.

Los bordes transparentes y el clip de fondo son compatibles con IE9 hacia arriba (y todos los demás navegadores modernos). Si necesita compatibilidad con IE8 o no necesita espacio transparente real, simplemente puede establecer un color de borde blanco y dejar el background-clip fuera.

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

Bueno, lo anterior funciona, aquí está mi solución que requiere un poco menos de marcado y es más flexible.

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

Haz un nuevo div con cualquier nombre (solo usaré table-split) y dale un ancho, sin agregarle contenido, mientras lo colocas entre los divs necesarios que necesitan ser separados.

Puede agregar cualquier ancho que encuentre necesario. Solo usé 0.6% porque es lo que necesitaba cuando tenía que hacer esto.

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

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