espace entre les divs - afficher la cellule de table

Question

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 divs (qui ont display:table-cell ) ?

Answer 1

Vous pouvez utiliser border-spacing proprié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;
}

JSBin Demo

Une autre option ?

Bien pas vraiment.

Pourquoi ?

• margin propriété n'est pas applicable à display: table-cell éléments.
• padding ne crée pas d'espace entre les bords des cellules.
• float détruit le comportement attendu de table-cell des éléments qui peuvent être aussi hauts que leur élément parent.

Answer 2

Utilisez des bordures transparentes si possible.

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

Explication

Vous pourriez utiliser le border-spacing comme le suggère la réponse acceptée, mais cela génère non seulement un espace entre les cellules du tableau, mais aussi 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 la méthode suivante transparent pour générer les marges des cellules. Les bordures transparentes nécessitent de définir background-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 à partir de IE9 (et tous les autres navigateurs modernes). Si vous avez besoin de la compatibilité avec IE8 ou si vous n'avez pas besoin d'un espace transparent, vous pouvez simplement définir une couleur de bordure blanche et laisser l'attribut background-clip dehors.

Answer 3

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

Answer 4

Voici ma solution, qui nécessite un peu moins de balises 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>

Answer 5

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

Vous pouvez ajouter la largeur que vous jugez nécessaire. J'ai juste utilisé 0,6% parce que c'est ce dont j'avais besoin quand j'ai dû faire ça.

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

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