Responsive table renders perfectly in everything but default iOS 7 mail app
14,469
Solution 1
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
- 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;
}
Solution 2
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
Solution 3
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:
Author by
Dillon
Updated on June 16, 2022Comments
-
Dillon almost 2 years
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/11D201Which 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.53For 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;toposition: 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 likeposition: relative;.
-
Dillon about 10 years
max-device-widthdoesn't change anything. The media query is definitely triggering, though. Any ideas on how to work aroundposition,top, andleftnot working? I'm pretty surecontentworks (in iOS mail at least). Is it common for other mobile email clients to not support this? -
John about 10 yearspositionwon't work especially in web clients. Imagine Gmail with your emailposition:fixed;- they lock that off so that you don't break the page. Similar to the style tag or anything that can make global page changes. Email is pretty strict on what CSS works. You may have some success with CSScontent, but as Gmail needs all CSS inlined, you are already limiting your audience. If you want a responsive layout, I have a bunch of resources here -
John about 10 yearsI haven't seen table
rules=rows frame=boxbefore. Makes it a lot easier than messing with borders on a fluid width. -
davidcondrey about 10 yearsOriginally these attributes were MSIE vendor attributes only but I tested them out a while back.. for the hell of it.. and was surprised to discover that they apparently have been included in the standard somewhere along the way.. -
davidcondrey about 10 yearsUse RULES=ROWS FRAME=HSIDES for row border top and bottom without the sides. RULES=COLS FRAME=BOX for column borders without the rows. RULES=COLS FRAME=VSIDES for column borders left and right without the top and bottom.
-
davidcondrey about 10 yearsJust a pointer.. never trust that Litmus tests are accurate. I do emails pretty regularly and have on more than one occasion found Litmus' results to be inaccurate. I now have physical devices to test for iOS, Windows Phone, and Android. And have email accounts setup with all the popular email providers, and a VM partition setup for Windows. And though I still run Litmus tests through Mailchimp for every campaign, I also test every client for myself. Especially when you start dealing with advanced responsive layouts and hiding classes, it's critical to do your own tests. Just a tip.
-
Dillon almost 10 years@dcc looks like this doesn't work outside of Litmus :(
-
John almost 10 yearsThanks for the rules/frames info. Based on the question jsfiddle, he wants it to look like this in desktop clients. In your example code, you've hard coded everything into rows which is just building it to resemble the desired responsive result. What you have there is just a responsive max-width toggle, not a full rows to columns conversion.
-
John almost 10 years@Dillon Looks like the media queries aren't firing at all in your linked image. Could be that the media queries aren't generous enough for the device you are using. If you are on an iPhone 5, try cranking up the
max-device-widthor add one of these queries (or these) to help it trigger correctly. -
Dillon almost 10 years@John is right. This isn't what I was trying to do. I just figured it out (and answered the question as well). You can see what I did here.
-
davidcondrey almost 10 yearsThe way you've coded it now, you should be aware that padding is not going to work well in Outlook or Lotus, margin will not work well in Outlook or Windows Live, and I'm not sure specifically about css content:'' but I highly doubt that property is supported in very many clients.
