问题
Hello i am doing a html mailer and i'm really facing a big problem and i;m failing to fix it. i have two tables in my html mailer and i want it to be responsive on phones i found article talking about that but they are doing the opposite he has two tables and on phone the left table go up and the right go down. for me i want to do the opposite i want the right one to go up and the left to go down. also when i tried his article steps it came fine on all the phones except iphone when i open on iphone mail it don't work.
here is it on jfiddle http://jsfiddle.net/heshamelmasry/kusb22tf/
<table class="col350" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 180px;">
<tr>
<td width="180" valign="top" style="border-right: dotted 1px #0E0E0E;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="25%"><img src="http://imagizer.imageshack.us/a/img910/484/48J327.png" height="32" width="28" style="display: block;"></td>
<td align="left" width="75%" style="
font-size: 13px;
"><b>FLorem Ipsum is siArticle</b></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 5px;font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr> <td style="padding-left: 5px;"> <a>Readmore</a> </td> </tr>
</tbody></table>
<hr style="border-top: dotted 1px;">
<!-- SECOND SECTION AT LEFT SIDE-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="25%"><img src="http://imagizer.imageshack.us/a/img910/6493/lF9TWP.png" height="32" width="28" style="display: block;"></td>
<td align="left" width="75%" style="
font-family: verdana, geneva;
font-size: 13px;
"><b>ILorem Ipsum is si</b></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 5px;font-family: verdana, geneva; font-size: 11px;">
BLorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 0 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">"Lorem Ipsum is si"<br></a>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is siLorem Ipsum is si</td>
</tr>
<tr>
<td style="padding: 0 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">"Business Insights are the New Oil"<br></a>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 0 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">"Lorem Ipsum is si"<br></a>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 0 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">"Lorem Ipsum is si"
<br></a>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Bloomberg TV
</td>
</tr>
<tr>
<td style="padding: 0 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">"Lorem Ipsum is si"<br></a>
</td>
</tr>
</tbody></table>
<hr style="border-top: dotted 1px;">
<!-- THIRD SECTION START-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="25%"><img src="http://imageshack.com/a/img911/9655/SrqD54.png" height="32" width="28" style="display: block;"></td>
<td align="left" width="75%"><b style="
font-family: verdana, geneva;
font-size: 13px;
">Lorem Ipsum is si</b></td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="padding: 10px 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">CLorem Ipsum is si<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">SIBOS<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">FT-TCS Financial Leaders Dinner<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">Lorem Ipsum is si <br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
fgfddddd
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">SSON Fi<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
S
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">S<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px font-family: verdana, geneva; font-size: 11px;;">
Lorem Ipsum is simply dumm
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">TCS NYC Marathon<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
New York City, Nov 1
</td>
</tr>
</tbody></table>
<hr style="border-top: dotted 1px;">
<!-- fourth section start-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="25%"><img src="" height="32" width="28" style="display: block;"></td>
<td align="left" width="75%"><b style="
font-family: verdana, geneva;
font-size: 13px;
">Links</b></td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="padding: 0 0 0 0;">
<a href="" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">TCS Asia Pacific<br></a>
</td>
</tr><tr>
<td style="padding: 0 0 0 0;">
<a href="" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">www.tcs.com<br></a>
</td>
</tr><tr>
<td style="padding: 0 0 0 0;">
<a href="" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">Contact us<br></a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
回答1:
There's a lot going on in this question. The answer to the basic question "How do I get the table on the right to be on top for the responsive layout," is in the DIR attribute. In your layout, you'll actually build the email backwards with the right column on the left and the left column on the right. However in the main table, set dir='rtl' to flip it. (Inside, set the container table's TDs to dir='ltr' to fix the content direction.
This is pseudocode:
<table dir="rtl"><tr>
<td dir="ltr">
<table>Right column contents</table>
</td>
<td dir="ltr">
<table>Left column contents</table>
</td>
</tr></table>
Full example is here: http://codepen.io/stg/pen/rxVWRR
Note, this was a quick-dirty example - media queries/style blocks are not at all supported by Gmail client for mobile devices. This example has a desktop-first media query.
EDIT - mobile-first pen: http://codepen.io/stg/pen/xZGjBz
来源：https://stackoverflow.com/questions/34178139/html-emailer-shifting-changing-the-position-of-tables