I'm working on html mail, but the width of last column is too small, my code is :
<td width='250' style="width: 250px !important;">
开发
</td>
and result is:
enter image description here
but when the word change to English not Chinese, the width works well:
enter image description here,
and when using web outlook it works well, but when use outlook client the width is too small.
Try setting the width and height also in your Table.
<table border="0" cellpadding="0" cellspacing="0" width="250" height="80">
<tbody>
<tr>
<td border="0" cellpadding="0" cellspacing="0" height="80" width="250">
</td>
</tr>
</tbody>
</table>
Related
I am writing a template for html email (God have mercy on my soul). The design looks simple enough — there is this centrally aligned block with some text and images:
Nothing too fancy, no multi-column layout or anything, and yet, I am stuck. Here’s what's giving me problems:
On desktop screens, the central block should be 480px wide.
On mobile phones, in portrait orientation (that's less than 480px), the central block should take the whole width of the screen
So my approach to this problem (borrowed from / inspired by other templates) was to create a table with 100% width, with another table inside, also 100% width, and a max-width of 480px, like so:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%; max-width: 480px;">
<tr>
<td>
Some blah
</td>
</tr>
</table>
</td>
</tr>
</table>
It works on mobile. It works in browser clients. It works in Thunderbird. It works in Apple Mail. It makes me smile. But of course, Outlook can't do max-width, so it blows up the central block to 100% width.
So how could I modify my code to make this design also work correctly in that abomination that is Outlook?
EDIT: This is what I was getting on mobile phone screens in portrait orientation when I just set the width of the internal table to 480px:
Perhaps you can use this trick from elidickinson:
<!--[if mso]>
<center>
<table><tr><td width="480">
<![endif]-->
<div style="max-width:480px; margin:0 auto;">
...
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
May I suggest you do like this
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table bgcolor="#f00" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="480">
Some blah
</td>
</tr>
</table>
</td>
</tr>
</table>
I have this table in my e.mail template and for some reason in outlook 2013 it apears double the height than it is actualy set:
[EDIT now codel looks like this]
<table align="center" border="0" cellpadding="0" cellspacing="0" height="6" width="100%" style="height: 6px; font-size: 6px; background-color:#d8ebf6; line-height= 6px;">
<tr class="preheader" width="100%" style="background-color:#d8ebf6;">
<td style="background-color:#d8ebf6;" align="left"></td><td height="6" width="600" align="center" style="background-color: #00568A;" valign="top"></td><td style="background-color:#d8ebf6;" align="right"></td>
</tr>
</table>
DEMO
Maybe some ideas why this happens or how to solve the issue?
Outlook will ignore height on empty table cells, it's minimum height is about 10px. You can add a non breaking space and this will look empty but satisfy outlooks desire to always be awkward.
So I wanted to share the solution I found which works fine both in outlook and common email inboxes:
Basically I needed to nest table in a table to get this dark blue part in the middle which on lower than 600 resolution takes up 100% width. And I needed to add font size and invisible char , because otherwise outlook was making two lines instead of intended one line.
Using previously posted code and adding invisible chars between <td></td> tags and adding font size helped as well, but on mobile(lower than 600 resolution) these invisible chars were leaving small whitespaces from left and right, so dark blue was not taking whole width as wanted.
Code:
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="res_width">
<tr class="preheader" style="background-color:#d8ebf6;">
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="res_width">
<tr>
<td valign="middle" height="6" width="600" style="background-color: #00568A; font-size: 6px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
DEMO
I am having a outlook html email nightmare here.. Basically there is one table and one image on the top and content on the bottom.:
The image is always substracting 1px so it is never 100% with the table. Anyone knows a solution?
<table cellpadding="0" cellspacing="0" style=
"margin-left:2px;padding:0px; width:846px; background-color:#000">
<tr>
<td>
<div style="font-size: 0px;"><img border="0" src=
"img/header1.jpg" style=
"display:block;align:bottom;border:none;padding:0; width:846px;"></div>
</td>
</tr>
<tr>
<td>Blah.. Content</td>
</tr>
</table>
I'm pretty sure this is from outlook's issue with border-collapse. Try this:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left" valign="top">
<img src="http://placekitten.com/g/640/300" width="640" height="300" alt="" style="display:block;" border="0" />
</td>
</tr>
</table>
Use the img tag for images.
Outlook uses Word for rendering HTML markup. You can read more about that in the following series of articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
In my email, there is a right-aligned image. And the problem is, its right side does not exactly stick to the right edge of parent table cell, in stead, there is a 1px gap. That only happens on Outlook 2007, 2010, and 2013, not on other versions of Outlook and other email agents.
Please copy the code at here and send it to Outlook 2007, 2010, or 2013 to see the problem.
I had tried many solutions such as border-collapes, mso-table-rspace, mso-line-height-rule, etc, and still had no luck.
When using images emails tend to perform more consistently when the width and height are also added to the which surrounds the image, please see my edited version of your table holding your image.
<table align="center" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="ffffff">
<tr>
<td width="600" align="right" bgcolor="ffffff" style="padding: 50px 0;">
<table align="right" width="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" height="200" align="right">
<img style="display: block;" src="http://placehold.it/250x200" width="250" height="200" border="0" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
Problems can also arise when <td> or <table> have no fixed widths, but immediately outer <td> or <table> do, as the inner <table> or <td> may not inherit the widths properly.
I haven't had an opportunity to test this, but I will if I can.
I have a table defined as
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<table width="600" border="0" cellspacing="0" cellpadding="25">
<tr>
<td width="210">Content 1 with grey background</td>
<td width="390">COntent 2 with white background</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" colspan="2"><img src="image.jpg" width="600"></td>
</tr>
</table>
Now this image.jpg has 210 px as grey background and 390px as white background in order to align with the above table cells.
However, it shows up as non aligned in outlook 2007. It shows up fine in others.
Any suggestions?
You're lucky it shows at all. The background property is loosely if at all supported by most email clients. I would suggest against using it or using just an <img> tag instead.
Here's more info on what outlook 2007 supports:
http://www.email-standards.org/clients/microsoft-outlook-2007/