web-dev-qa-db-fra.com

espace entre divs - 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>

Est-il possible de créer un espace entre ces deux divs (qui ont display:table-cell)?

htmlcsscss-tables
93
System-x32z

Vous pouvez utiliser la propriété border-spacing :

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

Une autre option?

Bien , pas vraiment.

Pourquoi?

  • margin property n'est pas applicable à _display: table-cell_ éléments.
  • La propriété padding ne crée pas d'espace entre les bords des cellules.
  • La propriété float détruit le comportement attendu des éléments _table-cell_ pouvant être aussi grands que leur élément parent.
185
Hashem Qolami

Utilisez des bordures transparentes si possible.

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

Explication

Vous pouvez utiliser la propriété border-spacing, mais elle génère non seulement un espace entre les cellules du tableau, mais également entre les cellules du tableau et le conteneur du tableau.

Si vous n'avez pas besoin de bordures visibles sur vos cellules de tableau, vous devez donc utiliser transparent border pour générer des marges de cellule. Les bordures transparentes nécessitent le réglage de 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 les images d'arrière-plan sont prises en charge à partir de IE9 (et de tous les autres navigateurs modernes). Si vous avez besoin de la compatibilité IE8 ou n'avez pas besoin d'espace transparent, vous pouvez simplement définir une couleur de bordure blanche et laisser le background-clip dehors.

17
Max
<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
jalalBK

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