从表格中删除单元格填充、单元格间距和边框答案

【问题标题】：Remove cellpadding ,cellspacing and border from table从表格中删除单元格填充、单元格间距和边框
【发布时间】：2012-11-24 04:07:14
【问题描述】：

我尝试使用 oscommerce 平台发送简单的时事通讯，内容是带有少量图像的简单表格。在我发送预览之前看起来不错（没有cellspacing 或cellpadding）

预览：

但在我收到并使用 gmail 打开后：

你可以看到表是不同的；我的意思是白色边框。

这是为时事通讯生成表格和内容的代码。

<table border="0" cellspacing="0" cellpadding="0">
   <tbody>
      <tr>
         <td><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter/Newsletter.jpg" style="width: 950px; height: 1187px;" /></td>
      </tr>
      <tr>
         <td><a href="http://www.sfbeautyskin.com/images//banners/Promotion_Dec_Xmas.jpg"><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter2.jpg" style="width: 950px; height: 114px;" /></a></td>
      </tr>
      <tr>
         <td><a href="http://www.sfbeautyskin.com/index.php"><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter3.jpg" style="width: 950px; height: 158px;" /></a></td>
      </tr>
      <tr>
         <td><a href="http://www.sfbeautyskin.com/contact_us.php"><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter4.jpg" style="width: 950px; height: 440px;" /></a></td>
      </tr>
   </tbody>
</table>

问题是如何彻底去除边框属性。

【问题讨论】：

如果你在 google 上搜索关键字，有很多教程建议 display:block -- "gmail 图片间距问题"

标签： css html-table html-email

【解决方案1】：

我以前也遇到过类似的电子邮件问题。如果我没记错的话，我通过在 td 中使用display: block 来修复它。

试试这样的：

<td><img alt="" style="display: block;" src="http://www.sfbeautyskin.com/uploads/image/Newsletter/Newsletter.jpg" style="width: 950px; height: 1187px;" /></td>

【讨论】：

【解决方案2】：

为每个 td 添加style="line-height:0"

<td style="line-height:0"><img ... /></td>

【讨论】：

我无法调整 img 标签，因为它们是在我的情况下动态创建的。所以这个解决方案对我有用。

【解决方案3】：

在每个tr、td 和img 元素上，添加style="margin:0;padding:0;"

或者只是一起删除你的表。它们似乎没有任何作用。

【讨论】：

虽然使用 CSS 很“酷”，但表格可以更轻松地创建有序、明确定义的列和行。当您在几分钟内需要列和行时，请使用表格，当您想花一整天的时间编写脚本时，请使用 CSS。
@JasonCaldwell 这不是酷与不酷的问题。这张桌子在这里毫无用处。他可以用空替换表格，不是css，不是div，不是etc。这里只有一列。
@Grumpy 道歉，我读了“+1 删除不必要的表格”，并认为这是另一个 CSS 狂热分子试图将 CSS 推到表格上。 CSS 追星族惹恼了我，看起来我没有阅读最初的问题就发布了。眨眼。

【解决方案4】：

现在定义你的img标签vertical-align:top

<img src="some.jpg" style="vertical-align:top;" />

Demo

--------

【讨论】：

【解决方案5】：

检查小提琴。 http://jsfiddle.net/tuD6L/12/

margin: -5px 0;

【讨论】：