Table cell width in HTML email does not correspond to width set in HTML or CSS

允我心安 提交于 2020-12-30 04:21:12

问题


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).

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; }

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

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

Edit: 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.


回答1:


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.

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




回答2:


You cannot apply stylesheets to HTML newsletters, it needs to be inline styles!

This:

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

Needs to be this:

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

Or:

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

Read this thoroughly, to help you in future http://www.sitepoint.com/code-html-email-newsletters/

Edit

I see the inline styles!

It looks like the table width's need to be defined in order for the td's to pick up the maximum width etc.



来源:https://stackoverflow.com/questions/17274903/table-cell-width-in-html-email-does-not-correspond-to-width-set-in-html-or-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!