HTML 电子邮件中的表格单元格宽度与 HTML 或 CSS 中设置的宽度不对应

Posted 2023-03-06

【中文标题】HTML 电子邮件中的表格单元格宽度与 HTML 或 CSS 中设置的宽度不对应

【英文标题】：Table cell width in HTML email does not correspond to width set in HTML or CSS

【发布时间】：2013-06-20 22:13:33

【问题描述】：

我正在尝试手动编写 html 电子邮件通讯（使用 MailChimp）。它应该看起来类似于使用应用程序创建的 viastedebouw.nl/newsflash/2013-06/（因此没有很好看的代码）。

我遇到的问题是其中一个表格单元格在 HTML 和 CSS 中设置了宽度，但两者都不对应。代码是：

HTML

<td  class="logo">

CSS

.logo  width: 140px; height: 140px; 

但是，由于某种原因，最终发生的情况是徽标 td 为 614px 宽，如下图所示：

电子邮件的完整代码可以在这里找到：https://gist.github.com/Flobin/5849501

编辑：我现在意识到我一开始就把整张桌子弄错了，天哪！大多数行有 1 个单元格，但有些有 2 个单元格。我忘记将 colspan="2" 添加到跨越整个表格宽度的单元格中。

【问题讨论】：

首先，标记无效。使用验证器。

带有标志的行有2个单元格，而第一个和剩余的只有一个。

@AlexK。你的评论让我意识到这个错误并不是电子邮件的一些晦涩的 CSS 规则，我首先把整个表格弄错了。哦！

【参考方案1】：

你需要把colspan="2" 放在每个单元格中，如果它本身是一行的话。由于您有一排有 2 个单元格，因此所有行需要加起来为 2。

此外，您还应该在表格的最顶部放置一个包含 2 个单元格的空行，以在 Outlook 中强制执行所需的宽度。请参阅this technique 了解更多信息

【讨论】：

我确实错过了colspan="2"！我不知道有两个单元格的空行。非常感谢！

【参考方案2】：

您不能将样式表应用于 HTML 通讯，它必须是内联样式！

这个：

<td  class="logo">

需要这样：

<td ><img src="http://yourdomain.com/images/logo.png"   /></td>

或者：

 <td ><img src="http://yourdomain.com/images/logo.png" style="width:140px;height:140px;" /></td>

仔细阅读本文，对你有帮助http://www.sitepoint.com/code-html-email-newsletters/

编辑

我看到了内联样式！

看起来需要定义表格宽度，以便 td 获取最大宽度等。

【讨论】：

参考截图，OP 使用的是内联样式的宽度。

不，他们没有，他们在 td 中添加了 'class="logo"'，仔细看。

啊，是的，我想我忘了提到我正在使用 MailChimp，它会自动内联所有样式（这很棒）。查看屏幕截图，它显示了这一点。

@msbodetti 是的，请仔细查看屏幕截图。 style="width:140px..."

对不起！我现在看到了@MrCode