CSS 第一项之前和最后一项之后没有边框间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7206997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
No border-spacing before first item and after last item
提问by Ragnis
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.
我有一张假桌子。我使用 border-spacing 属性在它们之间创建一个空间。但这也会在第一个单元格之前和最后一个单元格之后创建间距。
I would like it to create a space only between those two columns.
我希望它只在这两列之间创建一个空间。
HTML:
HTML：
<div class="table">
<div class="cell"></div>
<div class="cell"></div>
</div>
CSS:
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/
回答by Kim T
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.
您可以使用 border-spacing 属性为所有表格单元格添加间距。然后使用 margin-left 和 margin right 从父级中删除外边框间距。
.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;
}
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，因为表格需要 100% 的宽度，而右边距不起作用。
<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>
回答by emboss
If you look at the specfor tables in CSS, you will find there that the border-spacingapplies uniformly, adding e.g. a margin to your table-cellelements is ignored.
如果您查看CSS 中表格的规范，您会发现该规范是border-spacing统一应用的，例如向table-cell元素添加边距会被忽略。
So there seems to be no clean solution to your problem using divs with display: tableexcept for quite dirty hacks (I found this oneusing "spacer divs").
因此，使用divs with似乎没有干净的解决方案来解决您的问题，display: table除了非常脏的黑客（我发现这个是使用“spacer divs”）。
But if it's OK for you to use a "real" table instead, then you can use a solution that I find quite acceptable. See this jsFiddleupdate of your original.
但是，如果您可以使用“真实”表来代替，那么您可以使用我认为完全可以接受的解决方案。请参阅您原件的jsFiddle更新。
The markup (I added a column):
标记（我添加了一列）：
<table>
<tr>
<td></td>
<td></td>
<td class="last"></td>
</tr>
</table>
The idea is to make inner tds diplay:inline-blockwhich makes them responsive to margins again. Then you apply a CSS selector rule td + tdwhich selects all tds but the first one. Apply a margin-leftto those elements to get your "inner spacing". Finally you have to float:rightthe last column to make it add up with the right table border.
这个想法是使内部tdsdiplay:inline-block使它们再次响应边距。然后应用一个 CSS 选择器规则td + td，该规则选择除td第一个之外的所有s。将 amargin-left应用于这些元素以获得“内部间距”。最后，您必须添加到float:right最后一列以使其与正确的表格边框相加。
table {
width: 100%;
border: 5px solid #222;
border-collapse: separate;
}
td + td {
margin-left: 8%;
}
td.last {
float: right;
}
td {
display: inline-block;
width: 27%;
height: 20px;
border: 1px solid #999;
background: #ccc;
}
