html电子邮件转移改变表的位置

Question

你好我正在做一个HTML邮件，我真的面临一个大问题而且我没有解决它。我在我的html邮件程序中有两个表格，我希望它能在手机上做出响应，我发现文章谈到了这一点，但他们正在做相反的事情，他有两张桌子，在电话上左边的桌子上升，右边下降。对我来说，我想做相反的事情，我希望正确的一个上升，左边下去。 当我尝试他的文章步骤时，除了iphone之外，当我在iphone邮件上打开它不能正常工作时，所有手机都能正常运行。

这是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>

Answer 1

这个问题还有很多。基本问题的答案＆＃34;我如何获得响应式布局的右侧表格，＆＃34;在DIR属性中。在您的布局中，您实际上向后构建电子邮件，左侧的右侧列和右侧的左侧列。但是，在主表格中，设置 dir =＆＃39; rtl＆＃39; 来翻转它。 （在内部，将容器表的TD设置为 dir =＆＃39; ltr＆＃39; 以修复内容方向。

这是伪代码：

<table dir="rtl"><tr>
    <td dir="ltr">        
        <table>Right column contents</table>
    </td>
    <td dir="ltr">
        <table>Left column contents</table>
    </td>
</tr></table>

完整的例子在这里：http://codepen.io/stg/pen/rxVWRR

请注意，这是一个快速肮脏的示例 - 移动设备的Gmail客户端完全不支持媒体查询/样式块。此示例具有桌面优先媒体查询。

编辑 - 移动优先笔：http://codepen.io/stg/pen/xZGjBz