第一个项目之前没有边框间距,最后一个项目之后没有边框间距 [英] No border-spacing before first item and after last item
问题描述
我有一个假桌子。我使用border-spacing属性在他们之间创建一个空格。但这也会在第一个单元格之前和最后一个单元格之后创建间距。
I have a fake table. I use border-spacing property to create a space between them. But this also creates spacing before first cell and after the last cell.
我希望它只在这两列之间创建一个空格。
I would like it to create a space only between those two columns.
HTML:
<div class="table">
<div class="cell"></div>
<div class="cell"></div>
</div>
CSS:
.table {
display: table;
width: 100%;
border-spacing: 11px 0;
border: 1px solid #222;
}
.cell {
display: table-cell;
width: 50%;
height: 20px;
border: 1px solid #999;
background: #ccc;
}
JSFiddle:http://jsfiddle.net/ACH2Q/
JSFiddle: http://jsfiddle.net/ACH2Q/
推荐答案
您可以使用border-spacing属性以向所有表单元格添加间距。然后使用margin-left和margin来从父项中删除外边界间距。
You can use the border-spacing property to add spacing to all table cells. Then use margin-left and margin right to remove the outer border-spacing from the parent.
.container {
max-width: 980px;
margin: 0 auto;
overflow: hidden;
}
.grid {
margin-left: -20px; /* remove outer border spacing */
margin-right: -20px; /* remove outer border spacing */
}
.row {
display: table;
table-layout: fixed; /* keep equal cell widths */
width: 100%; /* need width otherwise cells aren't equal and they self collapse */
border-spacing: 20px 0; /* best way to space cells but has outer padding */
}
.col {
display: table-cell;
vertical-align: top;
}
唯一的缺点是你需要额外的嵌套div,因为表需要一个宽度100%和边距右边将不起作用。
The only disadvantage is that you need the extra nested div because the table needs a width 100% and margin right won't work.
<div class="container">
<div class="grid">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
</div>
这篇关于第一个项目之前没有边框间距,最后一个项目之后没有边框间距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!