Html 使用css在单元格（td）之间添加空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2070817/
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
Add space between cells (td) using css
提问by Amra
I am trying to add a table with space between cell as the background colour of the cell is white and the background color of the table is blue, you can easily see that padding and margin are not working (I am applying it to the td), it will only add space inside of the cell.
我试图在单元格之间添加一个带有空格的表格，因为单元格的背景颜色是白色，表格的背景颜色是蓝色，您可以很容易地看到填充和边距不起作用（我将它应用于td），它只会在单元格内部增加空间。
回答by Dominic Rodger
You want border-spacing:
你想要border-spacing：
<table style="border-spacing: 10px;">
Or in a CSS block somewhere:
或者在某个 CSS 块中：
table {
border-spacing: 10px;
}
See quirksmodeon border-spacing. Be aware that border-spacingdoes not work on IE7 and below.
见怪异模式上border-spacing。请注意，这border-spacing不适用于 IE7 及以下。
回答by Kelly
table {
border-spacing: 10px;
}
This worked for me once I removed
一旦我删除，这对我有用
border-collapse: separate;
from my table tag.
从我的表标签。
回答by JanBorup
Mine is:
我的是：
border-spacing: 10px;
border-collapse: separate;
回答by Kniganapolke
Consider using cellspacingand cellpaddingattributes for tabletag or border-spacingcss property.
考虑对标签或css 属性使用cellspacing和cellpadding属性。tableborder-spacing
回答by SF.
cellspacing (distance between cells) parameter of the TABLE tag is precisely what you want. The disadvantage is it's one value, used both for x and y, you can't choose different spacing or padding vertically/horizontally. There is a CSS property too, but it's not widely supported.
TABLE标签的cellspacing（单元格之间的距离）参数正是您想要的。缺点是它是一个值，同时用于 x 和 y，您不能选择不同的间距或垂直/水平填充。也有一个 CSS 属性，但它没有得到广泛支持。
回答by Ram
Suppose cellspcing/ cellpadding/ border-spacingproperty did not worked, you can use the code as follow.
假设cellspcing/ cellpadding/border-spacing属性没有工作，你可以使用代码如下。
<div class="form-group">
<table width="100%" cellspacing="2px" style="border-spacing: 10px;">
<tr>
<td width="47%">
<input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
</td>
<td width="5%"></td>
<td width="47%">
<input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
</td>
</tr>
</table>
</div>
I've tried and got succeed while seperate the button by using table-width and make an empty td as 2 or 1% it doesn't return more different.
我已经尝试并在使用 table-width 分离按钮时取得了成功，并将空的 td 设为 2 或 1%，它不会返回更多不同。
回答by obliviJohn
If you want separate values for sides and top-bottom.
如果您想为侧面和上下分别设置不同的值。
<table style="border-spacing: 5px 10px;">
