Responsive table renders perfectly in everything but default iOS 7 mail app - ios

Question

The default iOS 7 (iOS 7.1.1) mail app won't render this table correctly. Chrome, Firefox, and Safari (most recent versions) all render the desktop view and the mobile view perfectly. Internet Explorer renders the desktop view correctly but not the mobile view (which is fine). iOS Safari renders the mobile view perfectly. Here is a JSFiddle which shows it working properly when you resize it. Here is a screenshot of how it renders in iOS Mail.
HTML
<div id="responsive-table">
<table class="body-copy" style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<thead>
<tr>
<th>Item #</th>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>#####1</td>
<td>Item Description goes here I</td>
<td>1</td>
<td>$9.49</td>
<td>$9.49</td>
</tr>
<tr>
<td>#####2</td>
<td>Item Description goes here II</td>
<td>2</td>
<td>$9.99</td>
<td>$19.98</td>
</tr>
<tr>
<td>#####3</td>
<td>Item Description goes here III</td>
<td>4</td>
<td>$3.79</td>
<td>$15.16</td>
</tr>
<tr>
<td>#####4</td>
<td>Item Description goes here IV</td>
<td>1</td>
<td>$17.94</td>
<td>$17.94</td>
</tr>
<tr>
<td>#####5</td>
<td>Item Description goes here V</td>
<td>3</td>
<td>$4.99</td>
<td>$14.97</td>
</tr>
</tbody>
</table>
</div>
CSS
#media screen and (max-width: 480px) {
/* Force table to not be like tables anymore */
#responsive-table table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#responsive-table tr {
border: 1px solid #ccc;
margin-bottom: 25px;
}
#responsive-table td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 42% !important;
}
#responsive-table td:before {
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
}
#responsive-table td:nth-of-type(1):before {
content:"Item #";
}
#responsive-table td:nth-of-type(2):before {
content:"Description";
}
#responsive-table td:nth-of-type(3):before {
content:"Quantity";
}
#responsive-table td:nth-of-type(4):before {
content:"Price";
}
#responsive-table td:nth-of-type(5):before {
content:"Total";
}
}
#responsive-table{margin:0 0 20px 0;}
#responsive-table table{width:100%;border-collapse:collapse;}
#responsive-table th{background:#43904B;font-weight:bold;color:#FFFFFF;}
#responsive-table td,th{padding:7px 16px;text-align:left;border:0;border-style:solid;border-bottom:thin solid #E6E6E6;}
Some things I have tried:
Sending the email through Apple iCloud mail to the same iPhone. Result: No change.
Viewing the email in the Gmail iOS app. Result: Renders perfectly.
Removed all comments (you never know). Result: No change.
Changed <meta name="viewport" content="width=320, target-densitydpi=device-dpi"> to <meta name="viewport" content="width=device-width, initial-scale=1.0"> Result: No change.
Misc.
If it's any help, this is what useragentstring.com tells me the user agent is for the mail app (I sent myself an email with it in an iframe. No clue if this is correct procedure.).
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D201
Which is missing the bit about Safari at the end when you use the browser to view the page.
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53
For the curious, I started with this.
Updates
Added word-wrap: normal !important; to #responsive-table td {} which fixes the vertical text glitch.
Changing position: relative; to position: absolute; results in the following screenshot. This is not what I want, but the Mail app does render it the same way the browser does. It shows that the Mail app does not like position: relative;.

Answer 1

The reason your having trouble is because your using a lot of code which is just plain not supported in email clients. It's easy to make something look good in a browser, when you code for email you've gotta remember to simplify your code to the extreme. No fancy stuff.
Without getting too much into the subject.. you shouldn't use any code that didn't exist when XHTML1 was the standard because most email clients are based on XHTML1 doctype. And you should also try to do as much as humanly possible in HTML rather than CSS because CSS in email sucks.
Things I changed to make your code work:
Styling is defined on each cell because inherence in email is not reliable.
Border styling was removed in favor of the HTML table attributes rules=rows frame=box which produce the same affect
Line-height was converted to a pixel value rather than a percentage because you'll find percentage values are buggy in email sometimes, expecially line-height (which won't work in outlook)
All the advanced CSS you were using was removed because it's totally unsupported in email and just plain wasn't necessary anyway.
CSS positioning properties are not supported (top, right, bottom,left,absolute,relative,etc..)
Here's your complete code. I didn't spend the time matching your content exactly, you'll have to do that yourself. I just duplicated the same section three times to prove the example for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
html,body {width:100% !important;-webkit-text-size-adjust:none;margin:0;}
body, td{-webkit-text-size-adjust:none;}
.ReadMsgBody, .ExternalClass {width: 100% !important;background-color:#ffffff;}
.ExternalClass * {line-height: 100%}
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
table.responsive {width:600px;}
#media screen and (max-device-width: 600px), screen and (max-width: 600px) {
table[class="responsive"]{width:100%;}
}
</style>
</head>
<body bgcolor="#ffffff" border="0" style="min-width:100%;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;color:#666666;font-family:Arial,sans-serif;">
<center>
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" class="responsive" rules=rows frame=box style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
</table>
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
<table rules=rows frame=box width="100%" style="max-width:600px;font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
</table>
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
<table rules=rows frame=box width="100%" style="max-width:600px;font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Test Results
iOS Mail
Gmail
AOL
Yahoo

Answer 2

Try max-device-width instead of max-width in your media query. Start with a generous number like 10000 to see if you can get the media query to trigger at all. If it never triggers under any circumstance, there may be something preventing media queries working on your device.
CSS Position, top, left and content won't work in most clients either. Mac has the most generous support however as they use webkit to render emails.
UPDATE:
Here is a basic example of one way to do a list responsively in html email. The trick is to toggle width:100%; display:block; on your <td> elements. This is tested and it looks great in Litmus on all major clients that support media queries.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
#media only screen and (max-width: 600px), screen and (max-device-width: 600px){
table[class="main"] {
width:100% !important;
}
td[class="switch"], td[class="switchA"], td[class="switchB"] {
width:92% !important; /* width needs to be smaller that 100% because of borders */
display:block !important;
}
td[class="switchA"] {
border-top:1px solid #CCCCCC !important;
}
td[class="switchB"] {
border-left:1px solid #CCCCCC !important;
border-top:0;
}
tr[class="spacer"] {
display:block !important;
}
}
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="600" class="main" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="5%" align="center" bgcolor="#FFFFFF">
</td>
<td width="90%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding-top:40px; padding-bottom:40px;">
Some Content Here...
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FAFAFA">
<tr>
<td width="68" class="switch" style="padding:10px; border:1px solid #CCCCCC;" bgcolor="#EEEEEE">
Item #
</td>
<td width="149" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" bgcolor="#FAFAFA">
Description
</td>
<td width="99" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Quantity
</td>
<td width="99" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" bgcolor="#FAFAFA">
Price
</td>
<td width="119" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Total
</td>
</tr>
<tr class="spacer" style="display:none;">
<td height="30" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td width="68" class="switchA" style="padding:10px; border:1px solid #CCCCCC; border-top:0;" bgcolor="#EEEEEE">
Item #
</td>
<td width="149" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" bgcolor="#FAFAFA">
Description
</td>
<td width="99" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Quantity
</td>
<td width="99" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" bgcolor="#FAFAFA">
Price
</td>
<td width="119" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Total
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding-top:40px; padding-bottom:40px;">
More Content Here...
</td>
</tr>
</table>
</td>
<td width="5%" align="center" bgcolor="#FFFFFF">
</td>
</tr>
</table>
</td></tr></table></body></html>
LITMUS RESULTS:
Outlook 2000:
iPhone 5:
Android 4.2:

Answer 3

I figured it out! Here is a JSFiddle (with a little extra stuff from my full email).
Works in:
Gmail web view
OS X Mavericks
Chrome
Firefox
Safari
Microsoft Outlook 2011
Internet Explorer (Windows 7 virtual machine. Responsive code does not work)
iOS 7
Chrome
Safari
Mail
Mailbox (Loads spacer images with mobile width, renders rest as desktop view)
Windows XP
Microsoft Outlook 2007 (Really close to working. I haven't had time to tweak it for this yet, but it looks like it is just a few pixels too wide.)
HTML
<!-- COLUMN TITLES -->
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td align="center" bgcolor="#fbfbf8">
<table class="w640" border="0" cellpadding="0" cellspacing="0" width="640" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td class="w640 hide" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Item #</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Description</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Qty</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Price</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Total</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END COLUMN TITLES -->
<!--START PRODUCTS-->
<tr class="product">
<td class="w640" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addItemlabel"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">#####1</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203" class="addDesclabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Product Description 1</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86" class="addQtylabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">12</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addSinglelabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$9.99</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addTotallabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$119.88</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--END ROW 1-->
<!--START ROW 2-->
<tr class="product">
<td class="w640" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addItemlabel"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">#####2</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203" class="addDesclabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Product Description 2</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86" class="addQtylabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">1</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addSinglelabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$6.99</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addTotallabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$6.99</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--END ROW 2 -->
<!--START ROW 4-->
<tr class="product">
<td class="w640" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addItemlabel"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">#####4</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203" class="addDesclabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Product Description 4</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86" class="addQtylabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">2</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addSinglelabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$9.99</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addTotallabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$19.98</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
#media screen and (max-width: 480px) {
table[class=w280], td[class=w280], img[class=w280] {
display: block !important;
width: 300px !important;
}
table[class=w640], td[class=w640], img[class=w640], .headercell {
width: 300px !important;
}
table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] {
display: none !important;
}
img {
height: auto;
line-height: 100%;
}
table[class=w80] {
width:100% !important
}
table.w80 span.label {
text-align:left !important;
width:35%;
display:inline-block;
vertical-align:top
}
table.w80 span.content {
text-align:left !important;
display:inline-block;
width:60%;
}
table.w80 td.addItemlabel span.label:before {
content:"Item #:";
}
table.w80 td.addDesclabel span.label:before {
content:"Description:";
}
table.w80 td.addQtylabel span.label:before {
content:"Quantity:";
}
table.w80 td.addSinglelabel span.label:before {
content:"Price:";
}
table.w80 td.addTotallabel span.label:before {
content:"Total:";
}
.product {
border-bottom: solid #a7c2b1;
border-width:1px;
}
}
body {
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #ececec;
}
img {
display: block;
outline: none;
border: 0;
text-decoration: none;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table td, table tr {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
#background-table {
margin: 0;
padding: 0;
width: 100% !important;
background-color: #FFFFFF;
line-height: 100% !important;
}
body, td {
font-family:HelveticaNeue, sans-serif;
}