控制表格单元格之间的间距答案

【问题标题】：Controlling Spacing Between Table Cells控制表格单元格之间的间距
【发布时间】：2012-09-25 14:45:52
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

How to set cellpadding and cellspacing in CSS?的可能重复
Set cellpadding and cellspacing in CSS?的可能重复

标签： html css css-tables

【解决方案1】：

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

确保将border-collapse 设置为separate（否则每个单元格之间会有一个单独的边框，而不是每个单元格之间可以有间距的单独边框）。

【讨论】：

【解决方案2】：

检查此fiddle。您将需要看看使用边框折叠和边框间距。 IE 有一些怪癖（和往常一样）。这是基于an answer 到this question。

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>

【讨论】：

是的，这似乎是正确的。但是你能帮我描述一下*border-collapse: expression('separate', cellSpacing = '10px');这行吗？
无效的 CSS 属性名称（因此只能由损坏的解析器解析），然后嵌入 JavaScript 将（过时的）cellspacing 属性设置为旧版本 Internet 中的无效值（应该是 10 而不是 10px）探险家。在已死的浏览器中进行外观更改是不值得的。
它们显然被用于早期版本的 IE。我从未使用过它们，但根据我得到的答案，“表达式（'separate'，cellSpacing = '10px'）返回'separate'但两个语句都运行，因为在Javascript中你可以传递比预期更多的参数所有这些都将被评估。”我认为如果你需要支持低端的 IE 浏览器，Javascript 可能会比这个表达式快很多，因为表达式的计算频率很高（blog.dynatrace.com/2010/02/16/…）。
你让我兴奋了一秒钟，因为能够在表格单元格中使用边距。但是，它不起作用 - 更改小提琴中的 margin 值没有效果。

【解决方案3】：

table.test td {
    background-color: lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}

【讨论】：

【解决方案4】：

要完成工作，请使用

<table cellspacing=12>

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

【讨论】：

不再是“一些”，而是“大多数”：IE7 在 IE8 手中快死了，它确实支持 border-spacing CSS 属性，所以我个人觉得没有必要不再支持 IE7 (netmarketshare.com/…)

【解决方案5】：

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

JSFiddle

【讨论】：

迄今为止最简单的解决方案。鉴于其他一些响应，我可能应该检查不同的浏览器。