espace entre les divs - afficher la cellule du tableau

J'ai ici deux divs:

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

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

Existe-t-il un moyen de faire de l'espace entre ces deux div (qui ont display:table-cell)?

Vous pouvez utiliser la border-spacingpropriété:

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

Démo JSBin

Une autre option?

Enfin , pas vraiment.

Pourquoi?

• marginla propriété ne s'applique pas aux display: table-celléléments.
• padding la propriété ne crée pas d'espace entre les bords des cellules.
• floatLa propriété détruit le comportement attendu des table-celléléments qui peuvent être aussi hauts que leur élément parent.

Utilisez des bordures transparentes si possible.

Démo 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;
}

Explication

Vous pouvez utiliser la border-spacingpropriété, comme le suggère la réponse acceptée, mais cela génère non seulement un espace entre les cellules du tableau, mais également entre les cellules du tableau et le conteneur du tableau. Cela peut être indésirable.

Si vous n'avez pas besoin de bordures visibles sur les cellules de votre tableau, vous devez donc utiliser des transparentbordures pour générer des marges de cellule. Les bordures transparentes nécessitent un réglagebackground-clip: padding-box; car sinon, la couleur d'arrière-plan des cellules du tableau est affichée sur la bordure.

Les bordures transparentes et le clip d'arrière-plan sont pris en charge dans IE9 vers le haut (et tous les autres navigateurs modernes). Si vous avez besoin de la compatibilité IE8 ou si vous n'avez pas besoin d'espace transparent réel, vous pouvez simplement définir une couleur de bordure blanche et laisser de background-clipcôté.

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

Eh bien, ce qui précède fonctionne, voici ma solution qui nécessite un peu moins de balisage et est plus 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>

Créez un nouveau div avec n'importe quel nom (je vais simplement utiliser le partage de table) et donnez-lui une largeur, sans ajouter de contenu, tout en le plaçant entre les divs nécessaires qui doivent être séparés.

Vous pouvez ajouter la largeur que vous jugez nécessaire. Je viens d'utiliser 0,6% parce que c'est ce dont j'avais besoin lorsque je devais le faire.

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

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