html emailer改變表格的位置 (html emailer shifting changing the position of tables)

問題描述

html emailer改變表格的位置 (html emailer shifting changing the position of tables)

你好，我正在做一個 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>

參考解法

方法 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

(by Hesham El Masry、St.G)

參考文件

1. html emailer shifting changing the position of tables (CC BY‑SA 2.5/3.0/4.0)