espacio entre divs - mostrar tabla-celda

Tengo aquí dos divs:

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

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

¿Hay alguna forma de hacer espacio entre estos dos divs (que tienen display:table-cell)?

Puede utilizar la border-spacingpropiedad:

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

Demostración de JSBin

¿Alguna otra opción?

Bueno , en realidad no.

¿Por qué?

• marginla propiedad no es aplicable a los display: table-cellelementos.
• padding la propiedad no crea espacio entre los bordes de las celdas.
• floatLa propiedad destruye el comportamiento esperado de los table-cellelementos que pueden ser tan altos como su elemento padre.

Use bordes transparentes si es posible.

Demostración de 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;
}

Explicación

Puede usar la border-spacingpropiedad, como sugiere la respuesta aceptada, pero esto 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. Esto puede no ser deseado.

Si no necesita bordes visibles en las celdas de su tabla, debe usar transparentbordes para generar márgenes de celda. Los bordes transparentes requieren 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 en adelante (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 omitirlo 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>

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>

Haga un nuevo div con el nombre que sea (solo usaré table-split) y le dará un ancho, sin agregarle contenido, mientras lo coloca entre los divs necesarios que deben separarse.

Puede agregar el ancho que considere 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>