问题在CSS中设置cellpadding和cellspacing？

在HTML表格中 cellpadding 和 cellspacing 可以像这样设置：

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

如何使用CSS完成同样的工作？

2563

2017-12-04 08:45

起源

只是一个一般性的建议，在尝试这些解决方案之前，检查一下你的style.css是否对你的表进行了“重置”。示例：如果没有将表设置为 width:auto 然后 border-collapse 可能无法正常工作。 - PJ Brunet

在表上使用border-spacing并在td上使用padding。 - Anubhav

答案:

基本

要控制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通过Internet Explorer 7，你几乎没有运气。我说“差不多”，因为这些浏览器仍然支持 border-collapse property，它合并相邻表格单元格的边框。如果您正在尝试消除cellspacing（即， cellspacing="0"）然后 border-collapse:collapse 应该具有相同的效果：表格单元格之间没有空格。但是，这种支持是错误的，因为它不会覆盖现有的 cellspacing 表元素上的HTML属性。

简而言之：对于非Internet Explorer 5-7浏览器， border-spacing 处理你。对于Internet Explorer，如果您的情况恰到好处（您希望0个cellspacing并且您的表尚未定义它），您可以使用 border-collapse:collapse。

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

注意：有关可以应用于表和哪些浏览器的CSS属性的概述，请参阅此内容奇妙的Quirksmode页面。

3227

2017-07-09 02:34

cellpadding =“0”仍然可以在Chrome 13.0.782.215中产生差异，即使边框折叠：折叠和边框间距应用于表格。 - Lee

@LeeWhitney你需要在表格单元格上设置填充：0。 - Martin Ørding-Thomsen

它有点偏离主题，但在HTML5中删除了cellpadding和cellspacing属性，因此CSS是现在唯一的方法。 - Ignas2526

大家好。为了清晰起见，我已经更新了答案，包括一个关于cellpadding的部分，我认为这很明显（只需使用“填充”）。希望它现在更有用。 - Eric Nguyen

是的，@ vapcguy，在你可能正在设置表格的任何无限可变的其他情况下，你需要定义更具体的选择器。以上标记为示例。 - Eric Nguyen

默认

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

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

enter image description here

CELLPADDING

设置单元格内容与单元格墙之间的间距

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

enter image description here

CELLSPACING

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

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

enter image description here

都

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

enter image description here

两者（特别）

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

enter image description here

注意： 如果有 border-spacing 设置，它表明 border-collapse 表的属性是 separate。

亲自尝试一下！

这里你可以找到实现这个的旧的HTML方式。

851

2018-06-12 10:24

桌子周围的间距是如何消失的？当我设置“border-spacing：8px 12px时，它不仅在两者之间添加间距，而且在表格边框和外部单元格之间添加间距！但是这里没有描绘图像;它们是向左齐平的。 - Kaz

@ 2astalavista不幸的是，如果有人想要删除外部空间的效果，它将无法以这种方式使用这些CSS属性。 - Kaz

@Kaz你可能需要使用负边距来隐藏那个烦人的部分。

TD上的默认填充通常为1px，而不是0 - Jan M

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

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

313

2017-08-24 15:17

这实际上是我唯一可以为我工作的东西，虽然我将信息应用于id以避免过于笼统。 - Kzqai

那是 cellspacing=0 当量。相当于 cellspacing=1 完全不同。看到接受的答案。 - TRiG

不能 table td 和 table th 只是 td 和 th 分别？它适用于任何一种方式，但较小的选择器意味着匹配稍快 - Cole Johnson

@Cole实际上，我认为应该是 table > tr > td 和 table > tr > th。这几乎和。一样快 tr 和 th，如果你有一个嵌套表，它保证工作。只是我的2c - aboveyou00

@ aboveyou00但是 table 选择器需要？ IIRC，a <td> 除非在内部，否则无效 <tr>。 - Cole Johnson

据我所知，设置表格单元格的边距并没有任何影响。真正的CSS等价物 cellspacing 是 border-spacing - 但它在Internet Explorer中不起作用。

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

104

2017-12-04 09:18

在今天的时代，现实是对N度的扼杀。 - John K

这几乎是正确的，但是 border-collapse 如果表还没有，则仅在IE 5-7中有效 cellspacing 属性定义。我写了一个全面的答案，在这个页面上合并其他答案的所有正确部分，以防有用。 - Eric Nguyen

说实话，谁在乎Internet Explorer？使用它的任何人都应该知道破碎的网站其错误 - 使用这种低质量的浏览器。网站不应该处理这个问题。让Internet Explorer迷路了。忘记它的支持。我们不需要它，这对于开发来说是一种痛苦。 - Dev

此hack适用于Internet Explorer 6及更高版本，谷歌浏览器，Firefox和歌剧：

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

2017-12-05 04:30

对于那些尝试响应式电子邮件的人，请注意* Outlook 2007+无法识别*（使用word作为渲染引擎） campaignmonitor.com/css - ptim

对于那些想要非零单元间距值的人来说，下面的CSS对我有用，但我只能在Firefox中测试它。见怪异模式链接发布在别处兼容性细节。似乎它可能不适用于较旧的Internet Explorer版本。

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

2017-08-20 03:32

这个问题的简单解决方案是：

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

2017-12-08 16:04

问题 在CSS中设置cellpadding和cellspacing？

答案:

默认

CELLPADDING

CELLSPACING

都

两者（特别）

热门问题

问题在CSS中设置cellpadding和cellspacing？