在CSS中设置Cellpadd和CellSpaceing？

小开

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

小开

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

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

小开

table{border-collapse: collapse; /* 'cellspacing' equivalent */}
table td, table th{padding: 0; /* 'cellpadding' equivalent */}

小开

TBH。对于所有使用CSS的幻想，您不妨使用cellpadding="0"cellspacing="0"，因为它们没有被弃用…

任何其他建议在<td>上增加利润的人显然都没有尝试过这一点。

小开

最佳答案

基础

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

td {padding: 10px;}

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

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

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

IE≤7中的问题

这将适用于几乎所有流行的浏览器，除了Internet Explorer直到Internet Explorer 7，在那里你几乎不走运。我说“几乎”是因为这些浏览器仍然支持border-collapse属性，它合并了相邻表格单元格的边界。如果你想消除单元格间距（即cellspacing="0"），那么border-collapse:collapse应该有同样的效果：表格单元格之间没有空间。但是这种支持有缺陷，因为它不会覆盖表格元素上现有的cellspacing超文本标记语言属性。

简而言之：对于非Internet Explorer 5-7浏览器，border-spacing处理您。对于Internet Explorer，如果您的情况恰到好处（您想要0个单元格间距，而您的表尚未定义它），您可以使用border-collapse:collapse。

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

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

小开

对于那些想要非零细胞间距值的人，以下CSS对我有用，但我只能在Firefox中测试它。

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

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

小开

此黑客适用于Internet Explorer 6及更高版本、GoogleChrome、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中，您可以传递比预期更多的参数，并且所有参数都将被评估。

小开

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

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

小开

默认

浏览器的默认行为相当于：

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。

你自己试试吧！

这里你可以找到旧的超文本标记语言来实现这一点。

小开

使用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上测试过这个，因为这是我们在工作中可以使用的全部。

小开

根据我对W3C分类的理解，<table>仅用于显示数据。

基于此，我发现创建一个带有背景和所有这些的<div>要容易得多，并且使用position: absolute;和background: transparent;创建一个带有浮动数据的表…

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

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

小开

我在边框崩溃后使用了!important

border-collapse: collapse !important;

它在IE7中对我很有效。它似乎覆盖了细胞间距属性。

小开

试试这个：

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

或者试试这个：

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

小开

css：

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

小开

简单地使用CSS填充规则与表数据：

td {padding: 20px;}

对于边框行间距：

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

但是，由于框模型的差异实现，它可能会在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 */}

小开

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

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

小开

您可以使用CSS填充属性轻松地在表格单元格内设置填充。这是一种有效的方法，可以产生与表格的cell padd属性相同的效果。

table,th,td {border: 1px solid #666;}
table th,table td {padding: 10px;/* Apply cell padding */}

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8"><title>Set Cellpadding in CSS</title>
</head>
<body>
<table><thead><tr><th>Row</th><th>First Name</th><th>Last Name</th><th>Email</th></tr></thead><tbody><tr><td>1</td><td>Clark</td><td>Kent</td><td>clarkkent@mail.com</td></tr><tr><td>2</td><td>Peter</td><td>Parker</td><td>peterparker@mail.com</td></tr><tr><td>3</td><td>John</td><td>Rambo</td><td>johnrambo@mail.com</td></tr></tbody></table>
</body></html>

类似地，您可以使用CSS边框行间距属性来应用相邻表格单元格边框之间的行间距，就像cylSpaceing属性一样。但是，为了工作边框行间距，边框折叠属性的值muse是分开的，这是默认的。

table {border-collapse: separate;border-spacing: 10px;/* Apply cell spacing */}
table,th,td {border: 1px solid #666;}
table th,table td {padding: 5px;/* Apply cell padding */}

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8"><title>Set Cellspacing in CSS</title>
</head>
<body>
<table><thead><tr><th>Row</th><th>First Name</th><th>Last Name</th><th>Email</th></tr></thead><tbody><tr><td>1</td><td>Clark</td><td>Kent</td><td>clarkkent@mail.com</td></tr><tr><td>2</td><td>Peter</td><td>Parker</td><td>peterparker@mail.com</td></tr><tr><td>3</td><td>John</td><td>Rambo</td><td>johnrambo@mail.com</td></tr></tbody></table>
</body></html>

小开

假设我们想以符合HTML5的方式为我们的表分配一个10px的“cell填充”和一个15px的“cell间距”。我将在这里展示两个给出非常相似输出的方法。

两组不同的CSS属性适用于表的相同超文本标记语言，但概念相反：

第一个使用默认值border-collapse（separate）并使用border-spacing来提供细胞间距，
第二个将border-collapse切换为collapse，并使用border属性作为细胞间距。

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

第一种方法：

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

<table><tr><td>Header 1</td><td>Header 2</td></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>

第二种方法：

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

<table><tr><td>Header 1</td><td>Header 2</td></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>