CSS 如何设置单元格填充 cellpadding 和单元格间距 cellspacing ？

在CSS中，没有直接等价于HTML中cellpadding和cellspacing属性的CSS属性。不过，你可以使用CSS的一些属性来达到相同的效果。

CSS 实现 cellpadding 的效果

在HTML中，cellpadding属性用于设置表格单元格内部内容与其边界之间的空间。在CSS中，你可以通过设置单元格内的padding属性来实现相同的效果。

例如，如果你想要设置所有单元格的内边距为10px，你可以这样写：

css
td, th {
  padding: 10px;
}

CSS 实现 cellspacing 的效果

HTML中的cellspacing属性表示单元格之间的距离。在CSS中，这可以通过设置border-spacing属性来实现，但这个属性只适用于border-collapse属性为separate的表格。

下面是一个例子，设置单元格之间的间距为5px：

css
table {
  border-collapse: separate;
  border-spacing: 5px;
}

如果你使用border-collapse: collapse;，边框会合并，这种情况下border-spacing将不起作用。在border-collapse: collapse;模式下，单元格之间实际上没有间距，它们的边框会合并在一起。如果你希望在合并边框的情况下有间隙效果，你需要通过其他方式，比如添加透明边框来实现。

例如，给单元格增加一个透明边框：

css
td, th {
  border: 5px solid transparent;
}

结合使用

如果你想把padding和border-spacing结合起来使用，来模拟传统的cellpadding和cellspacing的效果，你可以这样做：

css
table {
  border-collapse: separate;
  border-spacing: 5px;
}

td, th {
  padding: 10px;
}

在这个例子中，表格单元格之间有5px的间距（类似cellspacing），并且每个单元格内容与其边界之间有10px的内边距（类似cellpadding）。

基本

要控制 CSS 中的“cellpadding”，您可以简单地padding在表格单元格上使用。例如，对于 10px 的“cellpadding”：

shell
td { 
    padding: 10px;
}

对于“cellspacing”，您可以将border-spacingCSS 属性应用于您的表格。例如，对于 10px 的“cellspacing”：

shell
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

此属性甚至允许单独的水平和垂直间距，这是老式“单元格间距”无法做到的。

IE ≤ 7 中的问题

这适用于几乎所有流行的浏览器，但 Internet Explorer 到 Internet Explorer 7 除外，在 Internet Explorer 7 中您几乎不走运。我说“几乎”是因为这些浏览器仍然支持该border-collapse属性，该属性合并相邻表格单元格的边框。如果您尝试消除单元格间距（即cellspacing="0"），那么border-collapse:collapse应该具有相同的效果：表格单元格之间没有空格。不过，这种支持存在缺陷，因为它不会覆盖cellspacing表元素上现有的 HTML 属性。

简而言之：对于非 Internet Explorer 5-7 浏览器，border-spacing可以满足您的需求。对于 Internet Explorer，如果您的情况正好（您想要 0 单元格间距并且您的表格尚未定义它），您可以使用border-collapse:collapse.

shell
table { 
    border-spacing: 0;
    border-collapse: collapse;
}

注意：有关可应用于表以及适用于哪些浏览器的 CSS 属性的详细概述，请参阅这个精彩的 Quirksmode 页面。

默认

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

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

         

细胞填充

设置细胞内容物和细胞壁之间的空间量

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

        

细胞间距

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

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

        

两个都

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

        

两者（特殊）

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

        

**注：**如果有border-spacing设置，则表明border-collapse该表的属性为separate。

自己尝试一下吧！

在这里您可以找到实现此目的的旧 HTML 方法。

table { border-collapse: collapse; /* 'cellspacing' equivalent */ }

shell
table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

据我所知，在表格单元格上设置边距实际上没有任何效果。真正的 CSS 等效项cellspacing是border-spacing- 但它在 Internet Explorer 中不起作用。

border-collapse: collapse如前所述，您可以使用可靠地将单元格间距设置为 0，但对于任何其他值，我认为唯一的跨浏览器方法是继续使用该cellspacing属性。

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

shell
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 中一样，您可以传递比预期更多的参数，并且所有参数都将被评估。