76

我正在尝试创建一个表格，其中每个单元格都有背景颜色，它们之间有空白。但我似乎很难做到这一点。

我尝试设置td边距，但似乎没有效果。

table.myclass td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
}

如果我对 做同样的事情padding，它可以工作，但是我没有单元格之间的间距。

有人可以帮我解决这个问题吗？

jsFiddle：http: //jsfiddle.net/BfBSM/

4

5 回答 5

97

使用元素border-spacing上的属性table来设置单元格之间的间距。

确保border-collapse设置为separate（或者每个单元格之间会有一个边框，而不是每个单元格周围有一个单独的边框，它们之间可以有间距）。

于 2012-09-25T14:56:25.840 回答
28

检查这个小提琴。您将需要看看使用边框折叠和边框间距。IE 有一些怪癖（像往常一样）。这是基于对这个问题的回答。

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 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>

于 2012-09-25T14:58:11.467 回答
3 
table.test td {
    background-color: lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}
于 2012-09-25T14:58:45.723 回答
2

要完成工作，请使用

<table cellspacing=12>

如果您宁愿“做对”而不是把事情做好，您可以改用 CSS 属性border-spacing，某些浏览器支持该属性。

于 2012-09-25T16:45:39.617 回答
1

使用border-collapse 和border-spacing 来获取表格单元格之间的空间。我不建议使用 QQping 建议的浮动单元格。

JSFiddle

于 2012-09-25T14:59:42.980 回答