在 CSS 中设置 cellpadding 和 cellspacing？

基本

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

td { 
    padding: 10px;
}

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

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

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

IE 中的问题 ≤ 7

这将适用于几乎所有流行的浏览器，除了 Internet Explorer 到 Internet Explorer 7，你几乎不走运。我说“几乎”是因为这些浏览器仍然支持 border-collapse 属性，它合并相邻表格单元格的边框。如果您试图消除单元格间距（即 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 属性的详细概述，请参阅此fantastic Quirksmode page。

---

默认

浏览器的默认行为等价于：

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

https://i.stack.imgur.com/cukle.png

单元格填充

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

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

https://i.stack.imgur.com/c0ght.png

单元格间距

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

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

https://i.stack.imgur.com/WNuBP.png

两个都

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

https://i.stack.imgur.com/eyZQl.png

两者（特殊）

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

https://i.stack.imgur.com/gbJ3T.png

注意：如果设置了border-spacing，则表示表格的border-collapse 属性是独立的。

Try it yourself!

Here 您可以找到实现此目的的旧 HTML 方法。

---

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

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

---

据我所知，在表格单元格上设置边距并没有任何影响。 cellspacing 的真正 CSS 等效项是 border-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 中，您可以传递比预期更多的参数，并且所有参数都将被计算。

---

对于那些想要非零单元格间距值的人，以下 CSS 对我有用，但我只能在 Firefox 中对其进行测试。

有关兼容性的详细信息，请参阅 Quirksmode 链接 posted elsewhere。似乎它可能不适用于较旧的 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 { 边距：0px 15px 0px 15px; } td.tight { 填充：0px; }

我的内容

是的，这很麻烦。是的，它适用于 Internet Explorer。事实上，我只用 Internet Explorer 对此进行了测试，因为这是我们在工作中被允许使用的全部内容。

---

此样式用于完全重置表格 - 单元格填充、单元格间距和边框。

我的 reset.css 文件中有这种风格：

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

---

待定。对于所有喜欢使用 CSS 的人，您不妨使用 cellpadding="0" cellspacing="0"，因为它们并未被弃用...

其他任何人在 <td> 上建议边距显然都没有尝试过。

---

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

td { 
    padding: 20px;
}

对于边框间距：

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

但是，由于盒子模型的不同实现，它可能会在旧版本的浏览器（如 Internet Explorer）中产生问题。

---

根据我对 W3C 分类的理解，<table> 旨在“仅”显示数据。

基于此，我发现使用 position: absolute; 和 background: transparent; 创建一个具有背景和所有内容的 <div> 并在其上浮动数据的表格要容易得多...

它适用于 Chrome、Internet Explorer（6 及更高版本）和 Mozilla Firefox（2 及更高版本）。

边距用于（或无论如何）在容器元素（如 <table>、<div> 和 <form>，而不是 <tr>、<td>、<span> 或 <input>）之间创建间隔。将它用于容器元素以外的任何东西都会让您忙于调整您的网站以适应未来的浏览器更新。

---

CSS：

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

---

您可以使用 CSS padding 属性轻松设置表格单元格内的填充。这是产生与表格的 cellpadding 属性相同的效果的有效方法。

table, th, td { 边框: 1px solid #666; } 表 th，表 td { 填充：10px； /* 应用单元格填充 */ } < body>

< /thead> < tr>

行	名字	姓氏	电子邮件
1	Clark	Kent	clarkkent@mail.com
2	彼得	帕克	peterparker@mail.com
3< /td>	约翰	兰博	johnrambo@mail.com

同样，您可以使用 CSS 边框间距属性来应用相邻表格单元格边框之间的间距，例如 cellspacing 属性。但是，为了使边框间距起作用，边框折叠属性的值必须分开，这是默认设置。

表{边框折叠：分开；边框间距：10px； /* 应用单元格间距 */ } table, th, td { border: 1px solid #666; } 表 th，表 td { 填充：5px； /* 应用单元格填充 */ } < body>

< /thead> < tr>

行	名字	姓氏	电子邮件
1	Clark	Kent	clarkkent@mail.com
2	彼得	帕克	peterparker@mail.com
3< /td>	约翰	兰博	johnrambo@mail.com

---

尝试这个：

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

或者试试这个：

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

---

我在边框折叠后使用了 !important

border-collapse: collapse !important;

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

---

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

如果 margin 不起作用，请尝试将 tr 的 display 设置为 block，然后边距将起作用。

---

假设我们想以 HTML5 兼容的方式为我们的表格分配一个 10px 的“cellpadding”和一个 15px 的“cellspacing”。我将在这里展示两种提供非常相似输出的方法。

两组不同的 CSS 属性适用于表格的相同 HTML 标记，但概念相反：

第一个使用边框折叠的默认值（单独）并使用边框间距来提供单元格间距，

第二个将border-collapse切换为折叠并使用border属性作为单元格间距。

在这两种情况下，单元格填充都是通过将 padding:10px 分配给 td 来实现的，在这两种情况下，分配给它们的 background-color 只是为了更清晰的演示。

第一种方法：

table{border-spacing:15px} td{background-color:#00eb55;padding:10px;border:0}

< /tr> < /表>

第二种方法：

table{border-collapse:collapse} td{background-color:#00eb55;padding:10px;border:15px solid #fff}

Header 1	Header 2
1	2
3	4

Header 1	Header 2
1	2
3	4

---