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
?
html
css
css-tables
System-x32z
quelle
quelle
position: relative
.position: relative
auftable-*-group
,table-row
,table-column
,table-cell
, undtable-caption
Elemente sind nicht definiert.border-right: 10px solid #FFF
. Dies funktionierte gut für mich beim Entwerfen eines CSS-Dropdown-Menüs, wenn ich etwas Platz zwischen dentable-cell
Elementen haben wollte.Verwenden Sie nach Möglichkeit transparente Ränder.
JSFiddle Demo
https://jsfiddle.net/74q3na62/
HTML
CSS
Erläuterung
Sie können die
border-spacing
Eigenschaft 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
transparent
Rä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
.quelle
quelle
Nun, das oben genannte funktioniert, hier ist meine Lösung, die etwas weniger Markup erfordert und flexibler ist.
quelle
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.
quelle