违约

浏览器的默认行为相当于：

table {border-collapse: collapse;}
td    {padding: 0px;}

单元格填充

设置单元格内容与单元格墙之间的空间量

table {border-collapse: collapse;}
td    {padding: 6px;}

单元格间距

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

table {border-spacing: 2px;}
td    {padding: 0px;}

Both

table {border-spacing: 2px;}
td    {padding: 6px;}

两者（特殊）

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

注意：如果设置了边框间距，则表示表的边框折叠属性是单独的。

自己试试吧！

在这里，您可以找到实现这一点的旧HTML方法。

我用过！在边境崩溃后很重要

border-collapse: collapse !important;

它在IE7中对我有用。它似乎覆盖了cellspacing属性。

只需对表数据使用CSS填充规则：

td { 
    padding: 20px;
}

对于边框间距：

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

然而，由于box模型的diff实现，它可能会在旧版本的浏览器（如Internet Explorer）中产生问题。

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

如果边距不起作用，请尝试将tr的显示设置为块，然后边距将起作用。

假设我们希望以符合HTML5的方式为表分配10px的“cellpadding”和15px的“cellspacing”。我将在这里展示两种方法，给出非常相似的输出。

两组不同的CSS财产应用于表的相同HTML标记，但概念相反：

第一个使用边界折叠的默认值（单独），并使用边界间距提供单元间距，第二个选项将边界折叠切换为折叠，并使用border属性作为cellspacing。

在这两种情况下，cellpadding都是通过为tds指定padding:10px来实现的，在这两个情况下，为它们指定的背景色只是为了更清晰的演示。

第一种方法：

表｛边框间距：15px｝td｛背景色：#00eb55；填充：10px；边框：0｝<表><tr><td>标题1</td><td>标题2</td></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>

第二种方法：

表｛边框塌陷：塌陷｝td{背景色：#00eb55；填充：10px；边框：15px纯色#fff}<表><tr><td>标题1</td><td>标题2</td></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>

此黑客适用于Internet Explorer 6及更高版本、Google Chrome、Firefox和Opera：

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

*声明适用于Internet Explorer 6和7，其他浏览器将正确忽略它。

expression（'separate'，cellSpacing='10px'）返回'separate'，但这两个语句都运行，因为在JavaScript中，您可以传递比预期更多的参数，所有参数都将被求值。