摆脱 HTML 电子邮件中的表格边框

Posted 2023-03-05

【中文标题】摆脱 HTML 电子邮件中的表格边框

【英文标题】：Getting Rid of Table Borders in HTML Emails

【发布时间】：2011-07-15 06:23:23

【问题描述】：

我正在开发一个 html 电子邮件活动（不允许使用 CSS），所以我不得不使用表格，这是我不太熟悉的东西。除了表格边框外，我的一切都看起来正确。每当我创建一个新的<tr> 时，我都无法摆脱内容周围的内边框。我尝试了一些技巧（border="0px"、bordercolor="white"、bordercolor="#ffffff" 等），但是每当我发送测试消息时，我的文本和图像周围的边框仍然显示为黑色。

这真的很影响我的设计流程。 有什么我不知道的技巧来摆脱 HTML 表格边框吗？帮助！

【问题讨论】：

每当我创建一个新的 时都应该阅读 你仍然可以在 HTML 中使用 CSS 内联，那么 CSS 是否仍然存在？ 什么电子邮件客户端？你能追踪到边界的来源吗？它是基于 Web 的客户端吗？ 边界出现在谷歌商业应用电子邮件、雅虎和美国在线。我正在使用一个名为 lyris 的在线程序来构建电子邮件，但我正在对整个内容进行编码，而不是使用所见即所得的编辑器。 已修复！ frame= 和 rules= !

【参考方案1】：

刚刚发现这个技巧确实有效（至少对于 ios）：

为了防止[细线边框]发生嵌套问题 表转换成一个背景颜色匹配的新表 内表。

来源：http://www.informz.com/blog/template-design/quick-tip-removing-hairline-borders-in-html-emails-on-iphone-ipad/（包括源代码照片）

【参考方案2】：

在没有像素的情况下使用<table border="0">？

【讨论】：

这只是this existing answer的重复。

【参考方案3】：

 <table border="0" cellpadding="0" cellspacing="0"  style = "border-collapse: collapse;">

【参考方案4】：

应用这个：

style = "border-collapse: collapse;"

对于每个表格单元格，边框不应再可见。

【参考方案5】：

试试这个：

在头上：

  <style type="text/css">
    table td border-collapse: collapse;
  </style>

表：

<table  border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border:2px solid #000000;">
  <tr>
    <td  bgcolor="#999999" style="padding:20px;">
    ...
    </td>
    <td  bgcolor="#888888" style="padding:20px;">
    ...
    </td>
  </tr>
  <tr>
    <td  bgcolor="#777777" style="padding:20px;">
    ...
    </td>
    <td  bgcolor="#666666" style="padding:20px;">
    ...
    </td>
  </tr>
</table>

此外，始终将 cellpadding 和 cellspacing 保持为零。如果需要间距，请在单元格中使用填充。

【参考方案6】：

如果内容是图像，请尝试<td valign="top"> 获取所有包含图像的<td>。 除此之外，表格标签应该是<table cellpadding="0" cellspacing="0" ...>。还有一个提示，为您想要的边框使用内联样式。

【参考方案7】：

要去掉表格边框，请使用<table border="0">。

【参考方案8】：

怎么样

<table style="border-collapse: collapse;">
  <!-- ... -->
</table>

？即使在 HTML 电子邮件中，这样的内联 CSS 也应该可以正常工作。

【讨论】：

我尝试了边框折叠，它可以删除整个表格边框，但不能删除单个表格行边框。这是我到目前为止所拥有的： 我想去掉 ... 周围的边框，但是什么都没有我试过会在实际的电子邮件中删除它。

我应该补充一点，当我预览电子邮件时，它看起来不错，但是当它实际发送时，内部 边框仍然存在。 @Ben，这很奇怪。它发生在所有电子邮件程序/提供商中吗？无论哪种方式，您都不应该在 html 属性中使用 px - w3.org/TR/html401/sgml/dtd.html#Length