题 在CSS中设置cellpadding和cellspacing?


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

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

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


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


84
2017-12-05 04:30



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


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

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

61
2017-08-20 03:32





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

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

44
2017-12-08 16:04