控制表格单元格之间的间距
我试图创build一个表，其中每个单元格都有一个背景颜色与他们之间的空白。 但是我似乎在做这件事情时遇到了麻烦。
我尝试设置td边距，但似乎没有效果。
table.myclass td { background-color: lime; margin: 12px 12px 12px 12px; }
如果我用填充做同样的事情，它的工作，但是我没有单元格之间的间距。
有人可以帮我吗？
jsFiddle： http : //jsfiddle.net/BfBSM/
使用table元素上的border-spacing属性来设置单元格之间的间距。
确保将border-collapse设置为separate （或者根本不会有任何间距）。
检查这个小提琴 。 你将需要看看使用border-collapse和border-spacing。 IE浏览器有一些怪癖（像往常一样）。 这是基于对这个问题 的回答 。
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：
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'); }
table.test td { background-color: lime; padding: 12px; border:2px solid #fff;border-collapse:separate; }
使用border-collapse和border-spacing获得表格单元格之间的空格。 我不推荐使用QQpingbuild议的浮动单元格。
的jsfiddle
为了完成工作，使用
<table cellspacing=12>
如果你宁愿“做对”，也可以使用一些浏览器支持的CSS属性border-spacing 。
