I have a table element which I'm going to send as an email.
I want it to render on outlook 2010, gmail native for android, and gmail on chrome on android.
I would like my table to have 100% width upto 600px.
One solution would be do with fixed settings, and have media queries.
@media screen and (max-width: 600px) {
table[class="responsive-table"] {
width: 100% !important;
}
}
This works fine in all but gmail on chrome on android, which takes the 600px width and overflows the screen, breaking the whole layout.
So I thought about doing a fluid layout, and putting 100% to the table, and giving it a max-width, but now outlook does not respect max-width, so it looks too wide in outlook.
So I can't use fluid because it looks bad on outlook, and I can't use fixed because it looks bad on gmail on chrome on mobile.
Is there any way I can make the look ok in both? Is there any hack for this?
Media queries doesn't work in Gmail App for Android and iPhone.
This can be done constructing basic layout shown below.
Tested in 60+ configurations, including:
- Outlooks 03/07/10/11/13
- iPhone 5 iOS7
- iPhone 5/6 iOS8
- Gmail App iPhone & Android
- Android 4.4.4
<!-- wrapper -->
<table align="center" width="100%" style="width: 100%;">
<tr>
<!-- this cell scales automatically, don't set width on it -->
<!-- add to ensure it will be rendered -->
<td> </td>
<!-- in the middle cell you set your max-width -->
<!-- notice double declaration for yahoo in html attribute -->
<td align="center" width="600" style="width: 600px;">
<!-- this table scales up to parent cell -->
<table align="center" border="0" width="100%" style="width: 100%;">
<tr>
<td align="center">
<!-- content -->
</td>
</tr>
</table>
</td>
<!-- this cell scales automatically, don't set width on it -->
<!-- add to ensure it will be rendered -->
<td> </td>
</tr>
</table>
Use conditional code with fluid layout. I also would assign a class or ID to your container and have it as a defined width (e.g.600px) in style block in head with media queries pushing back to percent after dropping below that width. This is for Apple mail and a couple other clients that do not respect max-width.
E.g.
<head><style> #outlook {width:600px;}</style></head>
<body>
<!--[if (mso) | (IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style=" max-width: 600px; border-collapse:collapse;" id="outlook">
<tr>
<td align="center"> YOUR CONTENT HERE</td>
</tr>
</table>
<!--[if (mso) | (IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
