レスポンシブなhtml電子メールテンプレートに問題がある

次の列が分かりやすいように、次の列が応答しやすいように表示されます。レスポンシブなhtml電子メールテンプレートに問題がある

また、上記のhtmlコードでは、問題が発生しているように反応しないと思います。これは、コードがどのように見えるべきかである

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Untitled Document</title> 
 
    <style> 
 

 
    @media only screen and (max-width:480px){ 
 
    table td[class="divider"] { 
 
    display: none !important; 
 
    } 
 

 
    table td[class="one"] { 
 
    width:100% !important; 
 
    } 
 
    .left { 
 
    width: 100% !important; 
 

 
    } 
 
    .right { 
 
    width: 100% !important; 
 

 
    } 
 
    } 
 

 
    </style> 
 
</head> 
 
<body> 
 
    <table border="0" cellpadding="0" cellspacing="0" style="border:1px #414141 solid;" width="100%"> 
 
     <tr> 
 
      <td class="one" style=" padding:10px 0 10px 10px;" width="40%"> 
 
       <table border="0" cellpadding="0" cellspacing="0" class="left" width="100%"> 
 
        <tr> 
 
         <td valign="top" width="100%"> 
 
          <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 
           <tr> 
 
            <td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-right:20px;">Visitors Per Week</td> 
 
           </tr> 
 
           <tr> 
 
            <td style="line-height:20px; height:50px; width:299px; padding-right:20px;"> 
 
             <table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%"> 
 
              <tr> 
 
               <td style="width:50%"><img src="https://i.stack.imgur.com/M37UY.png"></td> 
 
               <td style="color:#414141; font-family:'Roboto', sans-serif; width:50px; text-align:right; font-size:38px;">+1206</td> 
 
              </tr> 
 
             </table> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="divider" style="background-color: red;" width="1"></td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
      <td class="two" style=" padding:10px 10px 10px 0;" width="40%"> 
 
       <table border="0" cellpadding="0" cellspacing="0" class="right" width="100%"> 
 
        <tr> 
 
         <td class="divider" style="background-color: red;" width="2"></td> 
 
         <td> 
 
          <table> 
 
           <tr> 
 
            <td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-left:20px;">Clickthrough Rate</td> 
 
           </tr> 
 
           <tr> 
 
            <td style="line-height:20px; height:50px; width:300px; padding-left:20px;"> 
 
             <table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%"> 
 
              <tr> 
 
               <td style="width:50%"><img src="https://i.stack.imgur.com/IQ9PP.png"></td> 
 
               <td style="color:#414141; font-family:'Roboto', sans-serif; width:50%; text-align:right; font-size:38px;">+1206</td> 
 
              </tr> 
 
             </table> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
    </table>------------------------ Has anyone faced this kind of issue if solve it then please help me out Actually i want after the divider next column will come down like responsive thing works right. Also i think above html code having issue it's not behaving like responsive. Please guys look into this and help me out. Many thanks 
 
</body> 
 
</html>

出典

2017-06-13 aman

https://codepen.io/aman111/pen/YQGzGd?editors=1000 – aman

ねえ、それは動作しなかった私がコメント – aman

に追加したこのcodepen URLに見てください？ – Syfer

：ここ

はcodepen例です。それはAndroidのTDを読んで行を分割したり、Gmailで読むべきCSSを使ったりしていないためです。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Untitled Document</title> 
 
    <style> 
 

 
    @media screen and (max-width:480px){ 
 
    .divider {display: none !important;} 
 
\t .break th{display:block !important; width:100% !important;} 
 
    } 
 

 
    </style> 
 
</head> 
 
<body> 
 
    <table border="0" cellpadding="0" cellspacing="0" style="border:1px #414141 solid;" width="100%" class="break"> 
 
     <tr> 
 
      <th style=" padding:10px 0 10px 10px;font-weight:normal;margin:0px;" width="40%"> 
 
       <table border="0" cellpadding="0" cellspacing="0" class="left" width="100%"> 
 
        <tr> 
 
         <td valign="top" width="100%"> 
 
          <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 
           <tr> 
 
            <td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-right:20px;">Visitors Per Week</td> 
 
           </tr> 
 
           <tr> 
 
            <td style="line-height:20px; height:50px; width:299px; padding-right:20px;"> 
 
             <table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%"> 
 
              <tr> 
 
               <td style="width:50%"><img src="https://i.stack.imgur.com/M37UY.png"></td> 
 
               <td style="color:#414141; font-family:'Roboto', sans-serif; width:50px; text-align:right; font-size:38px;">+1206</td> 
 
              </tr> 
 
             </table> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="divider" style="background-color: red;" width="1"></td> 
 
        </tr> 
 
       </table> 
 
      </th> 
 
      <th style=" padding:10px 10px 10px 0;font-weight:normal;margin:0px;" width="40%"> 
 
       <table border="0" cellpadding="0" cellspacing="0" class="right" width="100%"> 
 
        <tr> 
 
         <td class="divider" style="background-color: red;" width="2"></td> 
 
         <td> 
 
          <table> 
 
           <tr> 
 
            <td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-left:20px;">Clickthrough Rate</td> 
 
           </tr> 
 
           <tr> 
 
            <td style="line-height:20px; height:50px; width:300px; padding-left:20px;"> 
 
             <table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%"> 
 
              <tr> 
 
               <td style="width:50%"><img src="https://i.stack.imgur.com/IQ9PP.png"></td> 
 
               <td style="color:#414141; font-family:'Roboto', sans-serif; width:50%; text-align:right; font-size:38px;">+1206</td> 
 
              </tr> 
 
             </table> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </th> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>

これはあなたのために働くなら、私に教えてください。

出典

2017-06-25 03:33:53 Syfer

完璧な仕事です。 – aman

-1

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Untitled Document</title> 
    <style> 

    @media only screen and (max-width:480px){ 
    table td[class="divider"] { 
    display: none !important; 
    } 
    table[class="left"] { 
     width: 100% !important; 
    } 
    } 
    @media only screen and (min-width:481px){ 
    table[class="left"] { 
     width: 50% !important; 
    } 
    } 

    </style> 
</head> 
<body> 
    <table border="0" cellpadding="0" cellspacing="0" style="border:1px #414141 solid;" width="100%"> 
     <tr> 
       <table border="0" cellpadding="0" cellspacing="0" style="float:left;" class="left"> 
        <tr> 
         <td valign="top" width="100%"> 
          <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
           <tr> 
            <td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-right:20px;">Visitors Per Week</td> 
           </tr> 
           <tr> 
            <td style="line-height:20px; height:50px; width:299px; padding-right:20px;"> 
             <table border="0" cellpadding="0" cellspacing="0" style="width:100%"> 
              <tr> 
               <td style="width:50%"><img src="https://i.stack.imgur.com/M37UY.png"></td> 
               <td style="color:#414141; font-family:'Roboto', sans-serif; width:50px; text-align:right; font-size:38px;">+1206</td> 
              </tr> 
             </table> 
            </td> 
           </tr> 
          </table> 
         </td> 
         <td class="divider" style="background-color: red;" width="1"></td> 
        </tr> 
       </table> 
       <table border="0" cellpadding="0" cellspacing="0" style="float:left;" class="left"> 
        <tr> 
         <td class="divider" style="background-color: red;" width="2"></td> 
         <td> 
          <table> 
           <tr> 
            <td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-left:20px;">Clickthrough Rate</td> 
           </tr> 
           <tr> 
            <td style="line-height:20px; height:50px; width:300px; padding-left:20px;"> 
             <table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%"> 
              <tr> 
               <td style="width:50%"><img src="https://i.stack.imgur.com/IQ9PP.png"></td> 
               <td style="color:#414141; font-family:'Roboto', sans-serif; width:50%; text-align:right; font-size:38px;">+1206</td> 
              </tr> 
             </table> 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
       </table> 
     </tr> 
    </table>------------------------ Has anyone faced this kind of issue if solve it then please help me out Actually i want after the divider next column will come down like responsive thing works right. Also i think above html code having issue it's not behaving like responsive. Please guys look into this and help me out. Many thanks 
</body> 
</html>

出典

2017-06-13 23:36:19 xxLITxx

Androidはtdを読んでいないので、iOSのようにtdを行に分割しません。 – Syfer

レスポンシブなhtml電子メールテンプレートに問題がある

答えて

関連する問題