Leerzeichen zwischen divs - Tabellenzelle anzeigen

95

Ich habe hier zwei Divs:

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

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

Gibt es eine Möglichkeit, Platz zwischen diesen beiden Divs zu schaffen display:table-cell?

System-x32z
quelle

Antworten:

191

Sie können border-spacingEigenschaft verwenden:

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

Irgendeine andere Option?

Nun , nicht wirklich.

Warum?

  • marginEigentum ist nicht anwendbar auf display: table-cellElemente.
  • padding Die Eigenschaft schafft keinen Platz zwischen den Kanten der Zellen.
  • floatEigenschaft zerstört das erwartete Verhalten von table-cellElementen, die so groß sein können wie ihr übergeordnetes Element.
Hashem Qolami
quelle
Irgendeine andere Option? Sicher position: relative.
Jongosi
@Jongosi Nach spec : Die Wirkung position: relativeauf table-*-group, table-row, table-column, table-cell, und table-captionElemente sind nicht definiert.
Hashem Qolami
3
Sie können auch einen einseitigen Rand in derselben Farbe wie der Hintergrund erstellen. border-right: 10px solid #FFF. Dies funktionierte gut für mich beim Entwerfen eines CSS-Dropdown-Menüs, wenn ich etwas Platz zwischen den table-cellElementen haben wollte.
Armadadrive
1
Sie können Zellen auch nur zum Abstand hinzufügen. Nicht ideal, aber zumindest vermeiden Sie die Kopfschmerzen beim Versuch, den Randabstand in der Zelle ganz rechts auszuschalten.
Daniel
Ich wollte auch, dass sich die "Polsterung" nur an einer Kante der "Zelle" befindet, also musste ich die Lösung von armadadrive verwenden, außer dass ich eine Randfarbe von rgba (0,0,0,0) für einen transparenten Rand verwendete, also ich Sie müssen sich keine Gedanken über Hintergrundfarbe / Bild machen. Rand rechts: 10px festes rgba (0,0,0,0);
JAX
19

Verwenden Sie nach Möglichkeit transparente Ränder.

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

Erläuterung

Sie können die border-spacingEigenschaft verwenden, wie aus der akzeptierten Antwort hervorgeht. Dadurch wird jedoch nicht nur Platz zwischen den Tabellenzellen, sondern auch zwischen den Tabellenzellen und dem Tabellencontainer generiert. Dies kann unerwünscht sein.

Wenn Sie keine sichtbaren Ränder für Ihre Tabellenzellen benötigen, sollten Sie daher transparentRänder verwenden, um Zellränder zu generieren. Transparente Ränder müssen eingestellt werden, background-clip: padding-box;da sonst die Hintergrundfarbe der Tabellenzellen am Rand angezeigt wird.

Transparente Ränder und Hintergrundclips werden ab IE9 (und allen anderen modernen Browsern) unterstützt. Wenn Sie IE8-Kompatibilität benötigen oder keinen transparenten Raum benötigen, können Sie einfach eine weiße Rahmenfarbe festlegen und diese weglassen background-clip.

Max
quelle
Die Einstellung "Rand rechts" reicht tatsächlich aus, um den Abstand dazwischen bereitzustellen. Es ist keine "Tabellen" -Deklaration erforderlich.
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>
jalalBK
quelle
0

Nun, das oben genannte funktioniert, hier ist meine Lösung, die etwas weniger Markup erfordert und flexibler ist.

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

Gareth Clarke
quelle
-6

Erstellen Sie ein neues Div mit einem beliebigen Namen (ich verwende nur Tabellensplit) und geben Sie ihm eine Breite, ohne Inhalt hinzuzufügen, während Sie es zwischen den erforderlichen Divs platzieren, die getrennt werden müssen.

Sie können die gewünschte Breite hinzufügen. Ich habe nur 0,6% verwendet, weil es das ist, wofür ich es brauchte, als ich das tun musste.

.table-split {
  display: table-cell;
  width: 0.6%
}
<div class="table-split"></div>

Anon
quelle
10
Dies ist eine schreckliche Lösung.
1
Dies war eine gängige Strategie, als tatsächliche Tabellenelemente für Layoutzwecke verwendet wurden, und ein Teil des Grundes dafür, dass die Methodik mittlerweile veraltet ist.
Rakitin
Da dies nur mit CSS möglich ist, sollte die Verwendung von HTML
vermieden