Answers:
您可以使用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;
}
还有其他选择吗?
好吧,不是真的。
为什么?
margin
属性不适用于display: table-cell
元素。padding
属性不会在单元格的边缘之间创建空间。float
属性破坏了table-cell
能够与其父元素一样高的元素的预期行为。position: relative
上table-*-group
,table-row
,table-column
,table-cell
,和table-caption
元件是未定义。
border-right: 10px solid #FFF
。当我在table-cell
元素之间需要一些空间时,在设计CSS下拉菜单时,这对我来说效果很好。
尽可能使用透明边框。
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;
}
您可以使用该border-spacing
属性,如公认的答案所示,但这不仅会在表单元格之间生成空间,还会在表单元格与表容器之间生成空间。这可能是不需要的。
如果您不需要表格单元格上的可见边框,则应该使用transparent
边框来生成单元格边距。需要设置透明边框background-clip: padding-box;
,否则表格单元格的背景颜色会显示在边框上。
IE9以上版本(和所有其他现代浏览器)均支持透明边框和背景剪辑。如果您需要IE8兼容性,或者不需要实际的透明空间,则只需设置白色边框颜色,然后将其background-clip
排除在外即可。
<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>
好了,上面的方法确实有效,这是我的解决方案,它所需的标记少了一点,而且更加灵活。
.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>
用任何名称创建一个新的div(我将只使用table-split)并为其设置宽度,而不添加内容,同时将其放置在需要分隔的必要div之间。
您可以添加所需的任何宽度。我只用了0.6%,因为这是我必须要做的。
.table-split {
display: table-cell;
width: 0.6%
}
<div class="table-split"></div>
position: relative
。