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

标签 html css html-table html-email

我正在尝试手动编写 HTML 电子邮件通讯(使用 MailChimp)。它应该看起来类似于 viastedebouw.nl/newsflash/2013-06/,它是用应用程序创建的(因此没有非常漂亮的代码)。

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

HTML

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

CSS

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

但是,出于某种原因,最终发生的是 Logo td 的宽度为 614px,如以下屏幕截图所示:

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

编辑:我现在意识到我一开始就弄错了整个表格,哦!大多数行有 1 个单元格,但有些行有 2 个。我忘记将 colspan="2" 添加到跨越整个表格宽度的单元格。

最佳答案

如果每个单元格单独成行,则需要将 colspan="2" 放入其中。由于一行包含 2 个单元格,因此所有行加起来需要为 2。

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

关于html - HTML 电子邮件中的表格单元格宽度与 HTML 或 CSS 中设置的宽度不对应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17274903/

相关文章:

css - 我的 div 没有留在我的 div 容器内

html - 防止导航菜单换行

php - 根据选择标签(下拉菜单)中的选择自动填充表单中的字段

css - Firefox 3.6 破坏了我的页面样式!

以百分比表示的 HTML 表格宽度,表格行平均分隔

html - 你如何斑马条纹 rowspan 表?

javascript - 控制台中出现不兼容的 IE 文档模式错误?

html - 如何改变div Angular 的形状?

javascript - 将多行从一个表拖放到另一个表

html - 表格扩展和不同的浏览器