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