Html 为什么边距填充在表 td 和 tr 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14088890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
why the margin padding doesn't work in table td and tr?
提问by user1932607
<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>
why i can't add margin padding to the tr and td? i want the td (<td style="background-color: #757575;">11194</td>) have margin-right.namely, each separated by some space. but can't work. how to correct it. and the second tr have some space between the following tr.
为什么我不能向 tr 和 td 添加边距填充？我希望 td ( <td style="background-color: #757575;">11194</td>) 有边距右。即，每个都由一些空格分隔。但不能工作。如何纠正它。并且第二个 tr 在接下来的 tr 之间有一些空间。
回答by macio.Jun
margin specifications are ignored for table cells Refer: http://www.w3.org/TR/CSS2/tables.htmland CSS Cell Margin
表格单元格的边距规范被忽略参考：http: //www.w3.org/TR/CSS2/tables.html和CSS 单元格边距
Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.
内部表格元素生成带有内容和边框的矩形框。单元格也有填充。内部表格元素没有边距。
If you wanna add padding, just set border-collapse:separate refer: http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse
如果你想添加填充，只需设置边框折叠：单独参考：http: //www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse
回答by Mr. Alien
I guess you are asking for border-collapse;so try using it...
我猜你是在要求border-collapse;所以尝试使用它......
table {
border-collapse: collapse;
}
If you want to add paddingyou can do it like
如果你想添加padding你可以这样做
table.class_name td {
padding: 0;
}
回答by w3uiguru
The reason because you are giving padding on tableelement and on tdand you are giving padding:0
原因是因为您在table元素上提供填充td并且您正在提供padding:0
Remove border-collapse: collapsefrom tableelement and you can handle padding and margin easily in this table.
border-collapse: collapse从table元素中删除，您可以轻松处理此表中的填充和边距。
See the demo fiddle for concepts: http://jsfiddle.net/GVt3z/
有关概念，请参阅演示小提琴：http: //jsfiddle.net/GVt3z/
Note: Above fiddle is not containing exact answer.
注意：上面的小提琴不包含确切的答案。
See updated fiddle for margin-right space but with different technique.
请参阅更新的小提琴以获取边距右侧空间，但使用不同的技术。
