HTML电子邮件中的表格单元格宽度与HTML或CSS中设置的宽度不对应 [英] Table cell width in HTML email does not correspond to width set in HTML or CSS

问题描述

我正在尝试手动编写HTML电子邮件通讯(使用MailChimp).它的外观应该类似于通过应用程序创建的viastedebouw.nl/newsflash/2013-06/(因此没有很好看的代码).

I'm trying to code an HTML email newsletter by hand (using MailChimp). It's supposed to look similar to viastedebouw.nl/newsflash/2013-06/ which was created with an app (and therefore does not have very nice looking code).

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

The problem that I'm having is that one of the table cells has a width set in HTML and CSS, but it does not correspond to either. The code is:

HTML

<td width="140" class="logo">

CSS

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

但是，由于某种原因，最终发生的是徽标td为614px宽，如以下屏幕截图所示:

However, what ends up happening is that the logo td is 614px wide, for some reason, as illustrated by this screenshot:

可在此处找到电子邮件的完整代码: https://gist.github.com/Flobin/5849501

The full code for the email can be found here: https://gist.github.com/Flobin/5849501

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

I'm now realizing I got the entire table wrong in the first place, d'oh! Most rows have 1 cell, but some have 2. I forgot to add colspan="2" to the cells that span the entire width of the table.

推荐答案

如果单独将 colspan ="2" 放在每个单元格中，则需要在每个单元格中放置 colspan ="2" .由于您的行包含2个单元格，因此所有行的总和必须为2.

You need to put colspan="2" in each cell if it is in a row by itself. As you have a row with 2 cells, all rows need to add up to 2.

此外，您还应该在表格的最上方放置一个空行，其中包含2个单元格以在Outlook中实施所需的宽度.有关更多信息，请参见此技术

Also, at the very top of your table you should also put an empty row with 2 cells to enforce the desired widths in Outlook. See this technique for more info

这篇关于HTML电子邮件中的表格单元格宽度与HTML或CSS中设置的宽度不对应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！