Question

<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.namely，每个都用一些空格分隔。但无法奏效。如何纠正它。并且第二个tr在以下tr之间有一些空格。

Answer 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

Answer 2

我猜您要求border-collapse;所以请尝试使用它......

table {
   border-collapse: collapse;
}

如果您想添加padding，可以像

一样添加

table.class_name td {
   padding: 0; 
}

Answer 3

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

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

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

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

请参阅更新的小提琴权利空间，但使用不同的技术。

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

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

3 个答案: