Holding table collapsing to inner table in Gmail

Hello,

I've been trawling this forum to find a fix for the issue concerning the holding table (with a width set to 100%) in my email that collapses to the width of the inner table (with a width set to 600px), in Gmail.

I use the fix for Hotmail:
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}

Is there one for Gmail?

Thanks,

James Ashcroft.

roshodgekiss roshodgekiss, 5 years ago

Hi James, could you kindly post your code here, or contact support? I can't seem to reproduce this issue in Gmail.

Also, you may want to check out this post on applying background images to Gmail/Outlook - nested tables are used in this manner here and to our knowledge, the technique is still up to date.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
jamesashcroft, 5 years ago

Hi, here's the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<title></title>
<style type="text/css">
.ReadMsgBody { width: 100%;} /* background colour and alignment fix for Hotmail */
.ExternalClass {width: 100%;} /* background colour and alignment fix for Hotmail */
body {background-color:#f3f3f5;margin:0;padding:0;width:100%;} /* background colour fix for Outlook */
div, p, a, li, td {-webkit-text-size-adjust:none;} /* Ignore minimum font size on iPad and iPhone */
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f3f3f5">
<tr>
<td>
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
    <tr bgcolor="#f3f3f5">
    <td bgcolor="#f3f3f5" width="50"><img src="images/spacer.gif" style="display:block;" width="50" height="16" alt=""></td>
    <td bgcolor="#f3f3f5" width="500"><img src="images/spacer.gif" style="display:block;" width="500" height="16" alt=""></td>
    <td bgcolor="#f3f3f5" width="50"><img src="images/spacer.gif" style="display:block;" width="50" height="16" alt=""></td>
    </tr>
    <tr bgcolor="#f3f3f5">
    <td bgcolor="#f3f3f5"></td>
    <td bgcolor="#f3f3f5" align="center"><p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#666666;margin:0;">If you are having trouble viewing this email, view it
    <a href="#" target="_blank" style="color:#666666;text-decoration:underline;"><span style="color:#666666;text-decoration:underline;">online</span></a></p></td>
    <td bgcolor="#f3f3f5"></td>
    </tr>
    <tr bgcolor="#f3f3f5">
    <td bgcolor="#f3f3f5">&nbsp;</td>
    <td bgcolor="#f3f3f5"></td>
    <td bgcolor="#f3f3f5"></td>
    </tr>
    <tr>
    <td colspan="3">
        <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td width="246"><img src="images/tm-logo.jpg" style="display:block;" width="246" height="75" alt="Trend Micro&#8482; | Securing Your Journey to the Cloud"></td>
        <td width="220"><img src="images/spacer.gif" style="display:block;" width="220" height="1" alt=""></td>
        <td width="134"><img src="images/no-1.jpg" style="display:block;" width="134" height="75" alt="#1 IN SERVER SECURITY"></td>
        </tr>
        </table>
    </td>
    </tr>
    <tr>
    <td colspan="3"><img src="images/header.jpg" style="display:block;" width="600" height="257" alt="PURCHASED A SERVER? PROTECT IT TODAY - Worry Free Business Security Services - ideal 1st server security"></td>
    </tr>
    <tr>
    <td colspan="3">
        <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td width="50"><img src="images/spacer.gif" style="display:block;" width="30" height="16" alt=""></td>
        <td colspan="3"><p style="font-family:Arial, Helvetica, sans-serif;font-size:13px;color:#666666;margin:0;"><strong>Thank you for taking the time to discuss<br>
          Trend Micro&#8482; Worry-Free&#8482; Business Security Services.</strong><br><br></p></td>
        <td width="50"><img src="images/spacer.gif" style="display:block;" width="30" height="16" alt=""></td>
        </tr>
        <tr>
        <td width="50"><img src="images/spacer.gif" style="display:block;" width="30" height="16" alt=""></td>
        <td width="230"><p style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#666666;margin:0;">It is the perfect complement to your first server.
        It simply and affordably secures your server and multiple computers from the very latest threats and data loss, so you can be certain that your data is safe wherever it is located.<br>
          <br>
        As a hosted service it&#8217;s fast and light, so it won&#8217;t slow down your computers or overload the server.</p></td>
        <td width="40"><img src="images/spacer.gif" style="display:block;" width="40" height="1" alt=""></td>
        <td width="230"><p style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#666666;margin:0;">It&#8217;s also easy to install and administer and has the added capabilities of centralised management and reporting.
        In fact, you can activate it in just 3 simple steps - register, login, and connect to protect &#8211; then you&#8217;re fully secured.<br>
          <br>
          <strong>So don&#8217;t delay!</strong><br>
          To protect your business call us today on <span style="color:#F00">xxxx xxx xxxx or xxx@xxxxxx.com</span></p></td>
        <td width="50"><img src="images/spacer.gif" style="display:block;" width="30" height="16" alt=""></td>
        </tr>
        </table>
    </td>
    </tr>
    <tr>
    <td colspan="3"><img src="images/footer.jpg" style="display:block;" width="600" height="67" alt=""></td>
    </tr>
    <tr>
    <td></td>
    <td align="center"><p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#666666;margin:0;">Copyright &copy; 1989-2011 Trend Micro Incorporated. All rights reserved.</p></td>
    <td></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    </tr>
    </table>
</td>
</tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 5 years ago

Hi James, I tested the above code in Gmail and the outer table (set to width="100%") doesn't seem to be collapsing for me. To display this, I've styled the outer table with a red dashed border, which correctly spans the width of the preview pane. Any chance you can post a screenshot?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098