146

I'm trying to create an HTML email that will display properly in all widely used email clients. I'm wrapping the whole email in a table, and I'd like it to have a width that is up to 98% of the available width, but no greater than 800 pixels. Like this: <table style="width:98%; max-width:800px;">

But I'm not doing it that way, since according to this Outlook 2007 does not support the CSS width property.

Instead, I'm doing this: <table width="98%">

Is there any way to also set a max-width without relying on CSS?

Tim Goodman
  • 23,308
  • 7
  • 64
  • 83
  • 2
    I've updated the accepted answer to the one from @MarkNugent since that seems to have attracted a consensus - even if it came 4 years too late to be useful to me. :) – Tim Goodman May 12 '16 at 22:45

5 Answers5

305

Yes, there is a way to emulate max-width using a table, thus giving you both responsive and Outlook-friendly layout. What's more, this solution doesn't require conditional comments.

Suppose you want the equivalent of a centered div with max-width of 350px. You create a table, set the width to 100%. The table has three cells in a row. Set the width of the center TD to 350 (using the HTML width attribute, not CSS), and there you go.

If you want your content aligned left instead of centered, just leave out the first empty cell.

Example: 

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table>

In the jsfiddle I give the table a border so you can see what's going on, but obviously you wouldn't want one in real life:

http://jsfiddle.net/YcwM7/

Mark Nugent
  • 3,497
  • 2
  • 15
  • 9
  • 20
    This is the best answer right here everyone ^^^. Ignore the accepted answer and the conditional answer. – Nick Manning Aug 25 '14 at 18:40
  • 9
    Just to save somebody else some time, at least one of those empty elements is necessary, or else the with the content will stretch to fill the entire . But this is definitely the best solution of the ones offered. – Chris Strickland Jan 22 '15 at 00:54
  • do I have to have border? Doesn't work without borders(( – Said Kholov Jul 23 '15 at 02:10
  • Works pretty well! If all that is needed is a container with a max-width – Prakash Raman Aug 04 '15 at 19:49
  • 2
    @Phyllis Sutherland You might try to remove inline img size and replace it by: `style="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"` – morespace54 Sep 15 '15 at 21:06
  • 5
    be careful not to add units to the inner width like i did or else it doesn't work! i.e. don't do width="350px" – magritte Oct 06 '15 at 12:39
  • 1
    This is the best solution as it works great without mso conditionals (which are not supported by some ESP's). – István Ujj-Mészáros Jan 11 '16 at 19:42
  • 3
    @PhyllisSutherland found a fix for images: `` https://litmus.com/community/discussions/1058-100-width-images-on-outlook – cbron Oct 03 '17 at 21:47
  • 1
    if an `img` is inside the `td`, then it needs the same `width` attribute as the `td`. not sure about other elements. – Dave Cousineau Feb 23 '18 at 20:21
  • Important: `table-layout: fixed;` should not be on the table. – biziclop Jun 19 '19 at 05:33
  • this approach works with images, just make sure to set the img element's height and width to 100% like `..` – Franklin Skipwhistle Jun 25 '21 at 18:44
  • HTML emails are among few subjects in programming where a 10 years old answer is still 100% valid – Ramtin Mar 04 '23 at 11:14
38

There is a trick you can do for Outlook 2007 using conditional html comments.
The code below will make sure that Outlook table is 800px wide, its not max-width but it works better than letting the table span across the entire window.

<!--[if gte mso 9]>
<style>
#tableForOutlook {
  width:800px;
}
</style>
<![endif]-->

<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
  <table id="tableForOutlook"><tr><td>
<![endif]-->
    <tr><td>
    [Your Content Goes Here]
    </td></tr>
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->
<table>
Shay Erlichmen
  • 31,691
  • 7
  • 68
  • 87
  • 6
    excellent suggestion, but since it's an id selector and not a class, you'd save some typing by using the width attr on the table element – Steve Wasiura Dec 18 '12 at 15:16
  • This is great. Except for one problem, by setting width, Outlook will not let the email shrink any smaller than the given dimensions. By not setting width, the email will expand to the whole screen. Pick your poison :) – The Coordinator Apr 02 '14 at 05:03
16

The short answer: no.

The long answer:

Fixed formats work better for HTML emails. In my experience you're best off pretending it's 1999 when it comes to HTML emails. Be explicit and use HTML attributes (width="650") where ever possible in your table definitions, not CSS (style="width:650px"). Use fixed widths, no percentages. A table width of 650 pixels wide is a safe bet. Use inline CSS to set text properties.

It's not a matter of what works in "HTML emails", but rather the plethora of email clients and their limited (and sometimes deliberately so in the case of Gmail, Hotmail etc) ability to render HTML.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Yeah, that's kind of what I expected, but I figured I'd ask. – Tim Goodman Mar 11 '10 at 15:58
  • +1: HTML in email is a horrible subject because of the varying quality of email clients. For some reason, even people who make a point of running the latest browser don't seem to bother upgrading their email software. There are some seriously out-of-date mail clients in common use, and even worse, mail clients typically lag behind the browsers of the day anyway. Sometimes you're actually better off just sending plain text if you want to be sure everyone will see the same thing. – Spudley Sep 01 '11 at 19:40
  • 36
    Setting a fixed width of 650 will make your emails look terrible in mobile email clients. – DrewB Nov 08 '12 at 17:18
  • Why is that? If you design it for this width why would it be "terrible"? – Diodeus - James MacFarlane Nov 08 '12 at 18:27
  • 6
    -1: It looks terrible because mobile devices have relatively small dimensions in the real world. This means that without zooming and panning, the text in your designs will be unreadably small. Take a look at the Campaign Monitor guide [Responsive Email Design](http://www.campaignmonitor.com/guides/mobile/). – Karl Horky Aug 26 '13 at 18:48
  • 1
    -1 also because I just dealt with this in mobile clients as well and having a fixed width was exactly my problem. – Brian FitzGerald Nov 08 '13 at 18:34
  • 8
    The year is 2015. Mobile devices are everywhere. You're saying to forget about the mobile devices for the stupid outlook? I say, forget about outlook. And every other shitty product from Microsoft. – refaelio Nov 11 '15 at 10:47
7

Bit late to the party, but this will get it done. I left the example at 600, as that is what most people will use:

Similar to Shay's example except this also includes max-width to work on the rest of the clients that do have support, as well as a second method to prevent the expansion (media query) which is needed for Outlook '11.

In the head:

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

In the body:

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

Here is another example of this in use: Responsive order confirmation emails for mobile devices?

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
3

This is the solution that worked for me

https://gist.github.com/elidickinson/5525752#gistcomment-1649300, thanks to @philipp-klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>
henry
  • 4,244
  • 2
  • 26
  • 37
  • Could you provide a more concise example, there is a lot of stuff in there that isn't required for solving the question – EdL Mar 11 '17 at 20:43
  • @EdL the idea is that _is_ the most concise way of getting email-friendly `max-width`. This entire thing would replace `
    ...
    `. For the email I was working on when I found this gist, this was the only solution that made things look right in Outlook 2010, 2013, and 2016.     – henry Mar 12 '17 at 20:04
  • 1
    @henry I was more referring to all the cellpadding font-size attributes etc. Images are a tricky one because unless you specify width="500" as an attribute, where 500 is the width in pixels outlook will make the images to full size (wrt. the image file) this generally results in fixed widths. – EdL Mar 13 '17 at 20:57
  • Leaving this as is because it isn't my code —I'm just quoting it from the gist— but I've made it a community wiki. I believe it _is_ necessary to explicitly specify `0px` `padding`s and `margin`s as well as `0` `cellpadding` and `cellspacing`. It's possible specifying `line-height` would work as a substitute for `font-size` to fill in for the times `height` isn't respected (I'd want to test it on all `tr`s and then on all `td`s to see exactly where it's needed). @EdL if you're able to get a lighter solution working as well as this that'd be awesome - please post it here and in that linked gist – henry Mar 14 '17 at 17:30