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
)?
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:
Vous pouvez utiliser la 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;
}
Une autre option?
Enfin , pas vraiment.
Pourquoi?
margin
la 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.float
La propriété détruit le comportement attendu des table-cell
éléments qui peuvent être aussi hauts que leur élément parent.position: relative
sur table-*-group
, table-row
, table-column
, table-cell
et des table-caption
éléments est non défini.
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.
Utilisez des bordures transparentes si possible.
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;
}
Vous pouvez utiliser la border-spacing
proprié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 transparent
bordures 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-clip
cô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>
position: relative
.