When using the default iOS 7 (iOS 7.1.1) mail app, there seems to be an issue with rendering a table correctly. Browsers like Chrome, Firefox, and Safari (latest versions) display both the desktop and mobile views perfectly. However, Internet Explorer only renders the desktop view correctly, while iOS Safari handles the mobile view flawlessly. You can see a working example by resizing this JSFiddle. Additionally, here is a screenshot of how the table 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>
...
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;
}
...
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
to<meta name="viewport" content="width=320, target-densitydpi=device-dpi">
Result: No change.<meta name="viewport" content="width=device-width, initial-scale=1.0">
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;.