CSS 删除表格单元格和行之间的间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8479090/
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
Remove spacing between table cells and rows
提问by Joe Mornin
I'm designing an HTML email template, which forces me to use tables. In the code below, I'm having trouble (1) removing the spacing below the placeholder image and (2) removing the space between the image and the caption. Here's a screenshot of how it looks in Chrome 15 on OS X 10.6.8.:
我正在设计一个 HTML 电子邮件模板，这迫使我使用表格。在下面的代码中，我遇到了问题（1）删除占位符图像下方的间距和（2）删除图像和标题之间的空间。这是它在 OS X 10.6.8 上的 Chrome 15 中的外观截图：
<!DOCTYPE HTML>
<html>
<head>
<title>Email Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
<tr>
<td id="main" style="background-color: #f2f2f2;">
<h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
<tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr>
<tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr>
</table><!--/.main-story-image-->
<p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p>
<p><a href="">Click here to read more </a></p>
<div style="clear: both;"></div>
</td><!--/#main-->
</tr>
</table>
</body>
</html>
The red borders are there only to show the outlines of the cells. I don't want them there in the final version.
红色边框仅用于显示单元格的轮廓。我不希望它们出现在最终版本中。
回答by Joe Mornin
It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: blockto the image, problem solved.
看起来 DOCTYPE 导致图像显示为内联元素。如果我添加display: block到图像，问题就解决了。
回答by Jukka K. Korpela
Add border-collapse: collapseinto the styleattribute value of the innertableelement. You could alternatively add the attribute cellspacing=0there, but then you would have a double border between the cells.
添加border-collapse: collapse到内部元素的style属性值中。您也可以在那里添加属性，但这样您就会在单元格之间有一个双边框。tablecellspacing=0
I.e.:
IE：
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">
回答by ayyp
You have cellspacing="0"twice, try replacing the second one with cellpadding="0"instead.
你有cellspacing="0"两次，试着用代替替换第二个cellpadding="0"。
回答by Petr Hladík
I had a similar problem. This helps me across main email clients. Add:
我有一个类似的问题。这有助于我处理主要的电子邮件客户端。添加：
- attributes
cellpadding="0",cellspacing="0"andborder="0"to tables - style
border-collapse: collapse;to tables - styles
padding: 0; margin: 0;to each element - and styles
font-size: 0px; line-height: 0px;to each element which is empty
- 属性
cellpadding="0"，cellspacing="0"和border="0"表 border-collapse: collapse;表格样式padding: 0; margin: 0;每个元素的样式- 和
font-size: 0px; line-height: 0px;每个空元素的样式
回答by drupal
Nothing has worked. The solution for the issue is.
没有任何效果。该问题的解决方案是。
<style>
table td {
padding: 0;
}
</style>
回答by Satish Upadhyay
Used font-size:0in parent TDwhich has the image.
font-size:0在TD具有图像的父级中使用。
回答by NJENGAH
I had a similar problem and I solved it by (inline)styling the td element as follows :
我有一个类似的问题，我通过（内联）样式 td 元素解决了它，如下所示：
<td style="display: block;">
This will work although its not the best practice. In my case I was working on a old template that had been styled using HTML tables.
这将起作用，尽管它不是最佳实践。就我而言，我正在处理使用 HTML 表格设计样式的旧模板。
回答by Vijay Kumar
Hi as @andrew mentioned make cellpadding = 0, you still might have some space as you are using table border=1.
嗨，@andrew 提到了 make cellpadding = 0，您在使用时可能还有一些空间table border=1。
回答by user2115923
Put display:blockon the css for the cell, and valign="top"that should do the trick
把display:block对CSS的细胞，并valign="top"认为应该做的伎俩
回答by amhp
If the caption box is gray then you can try wrapping the image and the caption in a div with the same background color of gray---so a "div" tag before the "tr" tag...This will mask the gap because instead of being white, it will be gray and look like part of the gray caption.
如果标题框是灰色的，那么您可以尝试将图像和标题包裹在一个具有相同灰色背景颜色的 div 中——所以在“tr”标签之前添加一个“div”标签......这将掩盖差距，因为它不是白色，而是灰色，看起来像灰色标题的一部分。
