147

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?

1
  • 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. :) May 12, 2016 at 22:45

5 Answers 5

310
+150

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/

12
  • 20
    This is the best answer right here everyone ^^^. Ignore the accepted answer and the conditional answer. Aug 25, 2014 at 18:40
  • 9
    Just to save somebody else some time, at least one of those empty <td> elements is necessary, or else the <td> with the content will stretch to fill the entire <tr>. But this is definitely the best solution of the ones offered. Jan 22, 2015 at 0:54
  • 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;" Sep 15, 2015 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 6, 2015 at 12:39
  • 3
    @PhyllisSutherland found a fix for images: <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> litmus.com/community/discussions/…
    – cbron
    Oct 3, 2017 at 21:47
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>
2
  • 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 Dec 18, 2012 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 :) Apr 2, 2014 at 5: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.

7
  • Yeah, that's kind of what I expected, but I figured I'd ask. Mar 11, 2010 at 15:58
  • 36
    Setting a fixed width of 650 will make your emails look terrible in mobile email clients.
    – DrewB
    Nov 8, 2012 at 17:18
  • 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.
    – Karl Horky
    Aug 26, 2013 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. Nov 8, 2013 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, 2015 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?

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>
4
  • 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, 2017 at 20:43
  • @EdL the idea is that is the most concise way of getting email-friendly max-width. This entire thing would replace <div style="max-width: ...px">...</div>. 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, 2017 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, 2017 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 paddings and margins 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 trs and then on all tds 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, 2017 at 17:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.