Rachael Nichols Rachael Nichols - 3 months ago 18
CSS Question

HTML email table widths

I am writing code for a HTML email. I have set widths and max-widths for each table however the table is not sticking to the specified width. This is causing particular problems in Outlook. I have taken 'px' values out (saw a previous post which suggested this) as well as being overly specific with margins! Does anyone have any advise?

See my code below:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=600" />
<title>Talent Academy Newsletter</title>
</head>
</html>

<body leftmargin="0" rightmargin="0" topmargin="0" marginheight="0" style="width: 100% !important; background-color: #FFF; margin:0!important;">
<table max-width="700" align="center" cellpadding="0" cellspacing="0" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0"> <!-- // wrapping table // -->
<tr>
<td width="700" align="center" valign="top">
<table width="700" cellpadding="0" cellspacing="0"><!-- // not displaying properly & welcome banner table // -->
<tr>
<td align="center" valign="middle" width="700" style="background-color: #e7e7e7; height: 25; text-align: center; font-size: 10px; font-family: Arial, Helvetica; color: #000;">
<p>Is Outlook ruining this pretty email? Click <strong>here</strong></p> <!--**add link here when on FTP**-->
</td>
</tr>
<tr>
<td align="center" valign="top" width="700" style="display: block; padding: 0;"> <!-- // welcome banner here // -->
<img src="images/welcome.png" alt="Welcome!" height="340" width="700">
</td>
</tr>
</table>
<table width="470" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0"> <!-- // into copy here // --> <!--be wary of width size here: 470-->
<tr>
<td align="center" valign="top" width="470" style="text-align: center; font-size: 18px; font-family: League Gothic, Arial; color: #000; padding-top: 15px;">
<p>1st edition <br> September 2016</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="470" style="text-align: center; font-size: 15px; font-family: Helvetica, Arial; color: #000; padding: 0px, 115px, 0px, 115px;"> <!--used another td as dif font/size -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra justo sed turpis rutrum, non molestie velit vehicula. Suspendisse sed est nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem odio, viverra eu velit vitae, posuere blandit orci. Integer placerat tempus tortor in pretium. Donec vitae magna et tortor maximus pulvinar vitae et magna. Nam aliquam molestie commodo.</p>
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0">
<tr max-width="700">
<td max-width="700" align="center" valign="top" width="700" style="display: block; padding-top: 30px; padding-bottom:50px;">
<img src="images/fever.png" alt="Welcome!" height="79" width="79">
<img src="images/nb.png" alt="Welcome!" height="79" width="79">
<img src="images/nbg.png" alt="Welcome!" height="79" width="79">
<img src="images/mw.png" alt="Welcome!" height="79" width="79">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0">
<tr>
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/internal.png" alt="Internal Training" height="85" width="700">
</td>
</tr>
<tr max-width="700">
<td width="260" style="display: inline-block; padding: 40px 63.5px 30px 20px;"> <!-- // bottom two //-->
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/fever2.png" alt="NB" height="35" width="32" align="right">
</td>
</td>
<td width="3" style="display: inline-block; padding-top: 40px; padding-bottom: 30px;">
<img src="images/line1.png" alt="" height="200" width="3">
</td>
<td width="260" style="display: inline-block; padding: 40px 20px 30px 63.5px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/nbg2.png" alt="NB" height="35" width="32" align="right">
</td>
</tr>
<tr max-width="700">
<td width="260" style="display: inline-block; padding: 40px 63.5px 30px 20px;"> <!-- // bottom two //-->
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/fever2.png" alt="NB" height="35" width="32" align="right">
</td>
</td>
<td width="3" style="display: inline-block; padding-top: 40px; padding-bottom: 30px;">
<img src="images/line1.png" alt="" height="200" width="3">
</td>
<td width="260" style="display: inline-block; padding: 40px 20px 30px 63.5px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/nbg2.png" alt="NB" height="35" width="32" align="right">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0"> <!-- // start of external training section // -->
<tr max-width="700">
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/external.png" alt="Internal Training" height="85" width="700"> <!-- // banner image // -->
</td>
</tr>
<tr max-width="700">
<td width="260" style="display: inline-block; padding: 5px 63.5px 30px 20px;"> <!-- // bottom two //-->
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
</td>
<td width="3" style="display: inline-block; padding-top: 5px; padding-bottom: 30px;">
<img src="images/line1.png" alt="" height="150" width="3">
</td>
<td width="260" style="display: inline-block; padding: 5px 20px 30px 63.5px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0">
<tr>
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/dare.png" alt="Internal Training" height="85" width="700"> <!-- // banner image // -->
</td>
</tr>
<tr>
<td width="380" style="display: inline-block; padding: 5px 0px 30px 20px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>PELLENTESQUE HABITANT TRISTIQUE</strong><br>Nam at auctor ante. Integer finibus nisl at euismod iaculis. Proin eleifend nunc ante, hendrerit semper felis pellentesque non. Etiam id quam metus. Ut pretium congue turpis ullamcorper tempus. Vivamus finibus elit ipsum, sit amet egestas dolor condimentum nec.<br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/icon_mail.png" alt="" height="26" width="33">
<img src="images/icon_web.png" alt="" height="31" width="31">
</td>
<td max-width="300" style="display: inline-block; padding: 0px 0px 0px 60px">
<img src="images/circle_right.png" alt="Dare to Share" height="255" width="240">
</td>
</tr>
<tr>
<!-- artwork the circle to reflect the one above -->
</tr>
</table>



</td>
</tr>

</table>
</body>

Answer

max-width is a CSS property, so you can't use it as HTML attribute, but it won't work in Outlook 2007-2013, so use width instead.

See more info here

SS