espaço entre divs - exibir célula de tabela

Eu tenho aqui dois divs:

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

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

Existe uma maneira de abrir espaço entre esses dois divs (que têm display:table-cell)?

Você pode usar a border-spacingpropriedade:

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

Alguma outra opção?

Bem , na verdade não.

Por quê?

• marginpropriedade não é aplicável a display: table-cellelementos.
• padding propriedade não cria espaço entre as bordas das células.
• floatpropriedade destrói o comportamento esperado de table-cellelementos que podem ser tão altos quanto seu elemento pai.

Use bordas transparentes, se possível.

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

Explicação

Você poderia usar a border-spacingpropriedade, como a resposta aceita sugere, mas isso não só gera espaço entre as células da tabela, mas também entre as células da tabela e o recipiente da tabela. Isso pode ser indesejado.

Se você não precisa de bordas visíveis nas células de sua tabela, você deve usar transparentbordas para gerar as margens das células. Bordas transparentes requerem configuração, background-clip: padding-box;caso contrário, a cor de fundo das células da tabela é exibida na borda.

Bordas transparentes e clipes de fundo são suportados no IE9 ou superior (e em todos os outros navegadores modernos). Se você precisa de compatibilidade com o IE8 ou não precisa de espaço transparente real, você pode simplesmente definir uma cor de borda branca e deixar de background-clipfora.

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

Bem, o acima funciona, aqui está minha solução que requer um pouco menos de marcação e é mais flexível.

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

Faça um novo div com qualquer nome (usarei apenas table-split) e dê-lhe uma largura, sem adicionar conteúdo, enquanto o posiciona entre os divs necessários que precisam ser separados.

Você pode adicionar a largura que achar necessária. Usei apenas 0,6% porque é o que eu precisava quando tinha que fazer isso.

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

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