如何摆脱电子邮件模板中的 html 表格边框

Question

我在 HTML 中创建了电子邮件模板，但它没有按预期工作。准确地说，html 表格边框部分在 Outlook 中不起作用。我设置了边框 0，但它仍然出现在 Outlook 电子邮件中。如果我在任何编辑器中运行 html，则不会显示边框。

我用谷歌搜索了很多，并尝试了不同的方法，我发现，但没有一个有用（不同的样式、边框折叠、在 td 和 tr 级别上设置边框 0 等）。

普通的 html 看起来像这样：

<table border="0" width="100%" cellspacing="0" cellpadding="0" 
align="center" bgcolor="#fff">
<tbody>
<tr bgcolor="#fff">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>

希望有人遇到过类似的问题并且知道如何解决这个问题。

Answer 1

尝试使用 style="border: none"

<table border="0" width="100%" cellspacing="0" cellpadding="0" 
align="center" bgcolor="#fff" style="border: none">
<tbody>
<tr bgcolor="#fff">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>

或者使用 style="border-collapse:collapse;"

<table border="0" width="100%" cellspacing="0" cellpadding="0" 
align="center" bgcolor="#fff" style = "border-collapse: collapse;">
<tbody>
<tr bgcolor="#fff">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>

Answer 2

在 2021 年 12 月及以后阅读此内容的任何人：请勿将 border-collapse: collapse 与 padding 一起使用。由于最近的 Office 365 更新，border-collapse: collapse 导致电子邮件显示与规定的填充大小的差距，就好像它们是边距一样。在大多数情况下，border="0" 或 border:0; 就足够了。

Answer 3

在您的电子邮件标题中声明table { border-collapse:collapse !important; }。

没有必要在每个表上都声明它。