为什么单元格间距在此表中不起作用？

Question

<table cellspacing="2" cellpadding="2">
<tr>
<td>123
</td>
</tr>
<tr>
<td>345</td>
</tr>
<tr>
<td>456</td>
</tr>
</table>

这里我想在行和列之间给出一个空格，但是这个单元格间距不起作用。我究竟做错了什么？

Answer 1

您提供的标记按预期工作，在单元格之间创建 2px 间隙。当单元格被赋予背景颜色时，这一点变得很明显。

也就是说，该元素的cellspacing和cellpadding属性已被弃用，不应使用。<table>

cellspacing要创建与和相同的样式，cellpadding您可以使用 CSS 属性：

• padding于<td>

• border-spacing在<table>. 该border-collapse属性需要保留为默认值separate。

  border-spacing CSS 属性指定相邻单元格边框之间的距离（仅适用于分离边框模型）。这相当于展示性 HTML 中的 cellspacing 属性，但可以使用可选的第二个值来设置不同的水平和垂直间距。

例子

table {
  border-spacing: 20px;
  background: #E91E63;
}
td {
  background: #F00;
  padding: 10px;
  background: #FCE4EC;
}

<table>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>345</td>
  </tr>
  <tr>
    <td>456</td>
  </tr>
</table>

Answer 2

使用边框折叠：折叠；CSS 规则（具有相同的效果：表格单元格之间没有空格）。请注意，这可能不适用于 IE 5 或 6 等较旧的浏览器，因此如果您需要支持它们，那么您就不走运了。

< TABLE style="clear: 两者; border-collapse: 折叠; border-spacing: 0; width: 100%;" >