在 CSS 中设置 cellpadding 和 cellspacing 吗?

在 HTML 表中,可以像这样设置cellpaddingcellspacing

<table cellspacing="1" cellpadding="1">

使用 CSS 如何完成相同的工作?

答案

基本

要在 CSS 中控制 “cellpadding”,您只需在表格单元格上使用padding 。例如 10px 的 “cellpadding”:

td { 
    padding: 10px;
}

对于 “cellspacing”,可以将border-spacing CSS 属性应用于表。例如 10px 的 “cellspacing”:

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

这个属性甚至可以允许水平和垂直分开,这是老式的 “cellspacing” 无法做到的。

IE <= 7 中的问题

这几乎可以在所有流行的浏览器中使用,除了 Internet Explorer 7 到 Internet Explorer 7 之外,您几乎不走运。我之所以说 “几乎” 是因为这些浏览器仍然支持border-collapse属性,该属性合并了相邻表格单元的边界。如果您要消除 cellspacing(即cellspacing="0" ),则border-collapse:collapse应该具有相同的效果:表单元格之间没有空格。但是,此支持存在很多问题,因为它不会覆盖 table 元素上的现有cellspacing HTML 属性。

简而言之:对于非 Internet Explorer 5-7 浏览器, border-spacing可以帮助您。对于 Internet Explorer,如果您的情况恰到好处(您希望 0 个单元格间距并且您的表尚未定义),则可以使用border-collapse:collapse

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

注意:有关可应用于表和哪些浏览器的 CSS 属性的概述,请参见此奇妙的 Quirksmode 页面

默认

浏览器的默认行为等效于:

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

在此处输入图片说明

细胞填充

设置单元格内容和单元格壁之间的空间量

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

在此处输入图片说明

细胞间隔

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

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

在此处输入图片说明

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

在此处输入图片说明

两者(特殊)

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

在此处输入图片说明

注意:如果设置了border-spacing ,则表示表的border-collapse属性是separate

自己尝试!

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

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

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

据我所知,在表格单元格上设置边距实际上并没有任何效果。真正的 CSS 等效于cellspacingborder-spacing但在 Internet Explorer 中不起作用。

您可以使用border-collapse: collapse来可靠地将像元间隔设置为 0,但是对于其他任何值,我认为唯一的跨浏览器方式是继续使用cellspacing属性。

此 hack 适用于 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 中,您可以传递比预期更多的参数,并且所有参数都将被求值。

对于那些想要非零的 cellpacing 值的人,以下 CSS 对我有用,但我只能在 Firefox 中对其进行测试。

有关兼容性的详细信息,请参见其他地方发布Quirksmode链接。似乎它不适用于较旧的 Internet Explorer 版本。

table {
    border-collapse: separate;
    border-spacing: 2px;
}

解决此问题的简单方法是:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

另外,如果您想要cellspacing="0" ,请不要忘记在table的样式表中添加border-collapse: collapse

用 div 包裹单元格的内容,您可以做任何想做的事,但是必须将每个单元格包裹在列中才能获得统一的效果。例如,要获得更大的左右边距:

因此 CSS 将

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}
<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

是的,这很麻烦。是的,它可以与 Internet Explorer 一起使用。实际上,我仅使用 Internet Explorer 进行了测试,因为这是我们允许在工作中使用的全部。

只需使用border-collapse: collapse将表格border-collapse: collapse ,将thtd padding