I borrowed the following responsive design email template for my own use. In a nutshell, two 320px tables are enclosed by a 640px table (because email design uses old-school HTML, and not floating divs). If the email is viewed on mobile, then it (should) read the @media-only styles (which compresses the width of the outer table) and stack the two inner tables. When I narrow the screen in Chrome, the two tables remain side-by-side. Why? What’s wrong with the code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Newsletter</title>
<style type="text/css">
@media only screen and (max-device-width: 480px) {
/* mobile-specific CSS styles go here */
/* Attribute selectors are being used to avoid an unusual glitch in Yahoo! Mail. */
table[class=contenttable] {
width: 320px !important;
}
}
</style>
</head>
<body>
<!-- template based on http://www.campaignmonitor.com/guides/mobile/responsive/ -->
<table class="contenttable" width="640" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <!-- encloses two 320px tables -->
<table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td><p style="text-align:center; font-family:Arial,Verdana,sans serif;font-size:1.3em">
<span style="color:#9c120c; font-weight:bold;">NEW! </span><span style="color:#054281;font-weight:bold;">
Product name goes here</span></p>
</td>
</tr>
</table>
<table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
<tr>
<td><p style="text-align:center; font-family:Arial,Verdana,sans serif;font-size:1.3em">
<span style="color:#9c120c; font-weight:bold;">NEW! </span><span style="color:#054281;font-weight:bold;">
Product name goes here</span></p>
</td>
</tr>
</table>
</td> <!-- END encloses two tables -->
</tr>
</table>
</body>
</html>
If the email is viewed on mobile, then it (should) read the @media-only styles (which compresses the width of the outer table) and stack the two inner tables.
I’m not sure if mobiles have all gotten so much better than the examples starting on slide 87 of http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu and the page looks simple so I’m surprised you’re not going for the mobile-first approach (worried about phones with IE?).
In any case I believe that in your first example code, the td holding the two tables is just doing what table cells do: expanding to enclose its content. Tables for whatever reason don’t have much problem with running off the page.
What I don’t understand is why, even in a td, two tables (who are blocks but their block display is “table” so different rules than other blocks) weren’t considered with an inherent newline between them like other blocks. I can’t remember the last time I had several tables all next to each other as siblings so I might be wrong and they might always try to stack alongside each other if they’re widths are small enough…
I failed to explain that this needs to first work in email clients, and those mobile email clients need to allow the inner tables to stack. Several email clients, like Outlook, do not read @media queries, so the stacking-table idea is used.
I have already gone back to stacking tables throughout, so no matter the width of the email client, the content is stacked and sized to fit. Works great in Outlook now, and still sizes nicely in mobile.