为什么边距填充在表 td 和 tr 中不起作用？答案

【问题标题】：why the margin padding doesn't work in table td and tr?为什么边距填充在表 td 和 tr 中不起作用？
【发布时间】：2012-12-14 20:42:27
【问题描述】：

<table  border="0" style="padding:10px;width: 960px;border-collapse: collapse;">

   <tbody>
<tr>
<td  style="padding: 0"><img src="8.jpg" alt="" /></td>
<td  style="padding: 0"><img src="98.jpg" alt="" /></td>
<td  style="padding: 0"><img src="998.jpg" alt="" /></td>
<td  style="padding: 0"><img src="1998.jpg" alt="" /></td>
</tr>
<tr>
<td  style="background-color: #757575;">11194</td>
<td  style="background-color: #757575;">11194</td>
<td  style="background-color: #757575;">11194</td>
<td  style="background-color: #757575;">11194</td>
</tr>
<tr>
<td  style="padding: 0"><img src="8.jpg" alt="" /></td>
<td  style="padding: 0"><img src="98.jpg" alt="" /></td>
<td  style="padding: 0"><img src="998.jpg" alt="" /></td>
<td  style="padding: 0"><img src="1998.jpg" alt="" /></td>
</tr>

</tbody>
</table>

为什么我不能在 tr 和 td 中添加边距？我希望 td (<td style="background-color: #757575;">11194</td>) 有margin-right.即，每个都由一些空格分隔。但不能工作。如何纠正它。并且第二个 tr 在以下 tr 之间有一些空间。

【问题讨论】：

查看我的答案并提供额外的 css，如果您在桌子上使用而不是内联样式。所以我可以看看问题中是否缺少某些东西。

标签： html css

【解决方案1】：

忽略表格单元格的边距规范参考：http://www.w3.org/TR/CSS2/tables.html 和CSS Cell Margin

内部表格元素生成包含内容的矩形框和边界。单元格也有填充。内部表格元素不有边距。

如果你想添加内边距，只需设置border-collapse:separate 参考：http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse

【讨论】：

但如果在表中，我希望第一个 tr 和第二个 tr 之间没有空格。但是第二个 tr 和第三个 tr 都有。谢谢。我将border-spacing：0添加到tr，但不起作用
将 height:100% 添加到 img 元素。
你试过了吗？如果这不是你想要的，请告诉我。

【解决方案2】：

我猜你要的是border-collapse;，所以尝试使用它...

table {
   border-collapse: collapse;
}

如果你想添加padding，你可以这样做

table.class_name td {
   padding: 0; 
}

【讨论】：

你能试试吗？尽管我设置了 td (11194)。这些都是相互联系的。两者都没有空间。
@user1932607 抱歉，我没有收到您的信息
11194 11194 我想让它们之间有一些空白
@user1932607 看看这个你想要这样的东西吗？ jsfiddle.net/vryqU
是的，如果不使用白色边框，使用margin或padding，都可以得到

【解决方案3】：

原因是因为您在 table 元素和 td 上提供了填充，而您正在提供 padding:0

从table 元素中删除border-collapse: collapse，您可以在此表格中轻松处理填充和边距。

有关概念，请参阅演示小提琴：http://jsfiddle.net/GVt3z/

注意：上面的小提琴不包含确切的答案。

查看更新的小提琴以获取边距右侧空间，但使用不同的技术。

http://jsfiddle.net/GVt3z/1/

【讨论】：

你能试试吗？尽管我设置了 td (11194)。这些都是相互联系的。两者都没有空间。
你不能给 td 元素添加边距，你可以给它们填充，因为它们都是 tr 的子元素，而 tr 是 table 元素的子元素。
您可以在表格元素上设置边距并为 td 元素设置内边距。
查看我更新的答案，并在我的答案jsfiddle.net/GVt3z/2 之后看到这个小提琴。