ioscssemailresponsive-designemail-client
Responsive table renders perfectly in everything but default iOS 7 mail app
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;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;.
Solution
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;
}