espace entre les divs - afficher la cellule du tableau


96

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

Réponses:


192

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.

Une autre option? Bien sûr, position: relative.
Jongosi

@Jongosi Selon les spécifications : L'effet position: relativesur table-*-group, table-row, table-column, table-cellet des table-captionéléments est non défini.
Hashem Qolami

3
Vous pouvez également créer une bordure unilatérale de la même couleur que l'arrière-plan. border-right: 10px solid #FFF. Cela a bien fonctionné pour moi lors de la conception d'un menu déroulant CSS lorsque je voulais un espace entre les table-celléléments.
armadadrive

1
Vous pouvez également ajouter des cellules uniquement pour l'espacement. Pas idéal, mais au moins vous évitez le mal de tête d'essayer de désactiver l'espacement des bordures sur la cellule la plus à droite.
Daniel

Je voulais aussi que le "padding" soit sur un seul bord de la "cellule", j'ai donc dû utiliser la solution d'armadadrive sauf que j'ai utilisé une couleur de bordure de rgba (0,0,0,0) pour une bordure transparente, donc je ne vous inquiétez pas de la couleur / image d'arrière-plan. bordure droite: 10px solide rgba (0,0,0,0);
JAX

19

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


Le paramètre 'border-right' est en fait suffisant pour fournir l'espace entre, aucune déclaration de "table" n'est requise.
forsberg

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

0

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>


-6

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>


10
C'est une solution terrible.

1
C'était une stratégie courante lorsque des éléments de tableau réels étaient utilisés à des fins de mise en page, et une partie de la raison pour laquelle la méthodologie est maintenant obsolète.
rakitin le

Comme cela peut être accompli avec css uniquement, l'utilisation de html doit être évitée
Toni Michel Caubet
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.