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;">
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
350px. You create a table, set the width to
100%. The table has three cells in a row. Set the width of the center
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.
<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: