Html 控制表格单元格之间的间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12585461/
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
Controlling Spacing Between Table Cells
提问by Jonathan Wood
I'm trying to create a table where each cell has a background color with white space between them. But I seem to be having trouble doing this.
我正在尝试创建一个表格，其中每个单元格都有一个背景颜色，它们之间有空白。但我似乎很难做到这一点。
I tried setting tdmargins but it seems to have no effect.
我尝试设置td边距，但似乎没有效果。
table.myclass td {
background-color: lime;
margin: 12px 12px 12px 12px;
}?
If I do the same thing with padding, it works, but then I don't have the spacing between cells.
如果我用填充做同样的事情，它会起作用，但是我没有单元格之间的间距。
Could someone help me with this?
有人可以帮我解决这个问题吗？
jsFiddle: http://jsfiddle.net/BfBSM/
jsFiddle：http: //jsfiddle.net/BfBSM/
回答by Quentin
Use the border-spacingproperty on the tableelement to set the spacing between cells.
使用元素border-spacing上的属性table来设置单元格之间的间距。
Make sure border-collapseis set to separate(or there will be a single border between each cell instead of a separate border around each one that can have spacing between them).
确保border-collapse设置为separate（否则每个单元格之间将有一个单独的边框，而不是每个单元格之间可以有间距的单独边框）。
回答by Buggabill
Check this fiddle. You are going to need to take a look at using border-collapse and border-spacing. There are some quirks for IE (as usual). This is based on an answerto this question.
检查这个小提琴。您将需要查看使用边框折叠和边框间距。IE 有一些怪癖（像往常一样）。这是基于一个答案到这个问题。
HTML:
HTML：
<table class="test">
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>?
CSS:
CSS：
table.test td {
background-color: lime;
margin: 12px 12px 12px 12px;
padding: 12px 12px 12px 12px;
}
table.test {
border-collapse: separate;
border-spacing: 10px;
*border-collapse: expression('separate', cellSpacing = '10px');
}
回答by Web Designer cum Promoter
table.test td {
background-color: lime;
padding: 12px;
border:2px solid #fff;border-collapse:separate;
}
回答by Jukka K. Korpela
To get the job done, use
要完成工作，请使用
<table cellspacing=12>
If you'd rather “be right” than get things done, you can instead use the CSS property border-spacing, which is supported by some browsers.
如果您宁愿“正确”而不是完成任务，您可以改用 CSS 属性border-spacing，某些浏览器支持该属性。
