電子メールの基礎 - 小さな列で列と行の位置がずれていますか？

私が働く会社の電子メールを作成しようとするのが難しいです。何かが整列していないようです。私はこれをどのように修正するか分からない。どんな助け？（読みやすくするために切り取られた）電子メールの基礎 - 小さな列で列と行の位置がずれていますか？

HTML

<body> 
    <table align="center" class="container"> 
    <tbody> 
     <tr> 
     <td> 
      <table class="row"> 
      <tbody> 
       <tr> 
       <th class="large-6 small-12 columns">   <-- OVERFLOWS 
        <table> 
         <tr> 
         <th> 
          <h5 class="text-center lead">Lieferadresse</h5> 
          <p class="text-center sub">Fredrick Müller</p> 
          <p class="text-center sub">Apfelstraße 12</p> 
          <p class="text-center sub">95468 Weiden</p> 
          <p class="text-center sub">Germany</p> 
         </th> 
         </tr> 
        </table> 
        </th> 
       </tr> 
       </tbody> 
      </table> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </body>

問題の説明

画面がsmallブレークポイントに縮小し、largeブレークポイントスタイルが削除されていないようです。私はこれが問題を引き起こしていると信じていますが、それを修正する方法は知らないのです。

コード内で指摘したthタグがテーブルをオーバーフローさせ、ドキュメント全体が応答しなくなります。

私の実際のコードでは、ここには示されていませんが、それぞれfirstとlastの2つのthタグがあります。これらのクラスは悪化させるようですが、largeブレークポイントではすべてが整列しています。

それは誰もが問題を再現したい場合には、ここでのCDNは、次のとおりです。ここで

<!-- Foundation for Emails --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.css" />

、Googleのデベロッパーツールのための問題があります。あなたが見ることができるように、大きなスタイルはまだ要素に影響しています。異常paddingとミスアライメントが発生します。

EDIT

ここで問題をオフに示す画像です。

あなたは何ができるか

ラース

出典

2017-08-04 Lars Peterson

私はすべての問題を見ていませんよ？問題のイメージを貼り付けることはできますか？ – RasmusGlenvig

@RasmusGlenvig私の編集した答えを確認してください。 –

私はそれを見て、それはパディング - 左を与える "最初の"クラスですか：16px – RasmusGlenvig

、あなたがたありがとう、<th class="large-6 small-12 columns" style="padding-left: 8px;">を与え、その後、彼らの両方が中心になります。

コードスニペット：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.css" /> 
 
    
 
<body> 
 
    <table align="center" class="container"> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <table class="row"> 
 
      <tbody> 
 
       <tr> 
 
       <th class="large-6 small-12 columns first" style="padding-left: 8px;">   
 
        <table> 
 
         <tr> 
 
         <th> 
 
          <h5 class="text-center lead">Rechnungsadresse</h5> 
 
          <p class="text-center sub">Fredrick Müller</p> 
 
          <p class="text-center sub">Apfelstraße 12</p> 
 
          <p class="text-center sub">95468 Weiden</p> 
 
          <p class="text-center sub">Germany</p> 
 
         </th> 
 
         </tr> 
 
        </table> 
 
        </th> 
 
        <th class="large-6 small-12 columns last">   
 
        <table> 
 
         <tr> 
 
         <th> 
 
          <h5 class="text-center lead">Lieferadresse</h5> 
 
          <p class="text-center sub">Fredrick Müller</p> 
 
          <p class="text-center sub">Apfelstraße 12</p> 
 
          <p class="text-center sub">95468 Weiden</p> 
 
          <p class="text-center sub">Germany</p> 
 
         </th> 
 
         </tr> 
 
        </table> 
 
        </th> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </body>

出典

2017-08-04 09:42:30 RasmusGlenvig

私は非常に多くお寄せいただいた答えを感謝していますが、これは回避策であり、残念ながらプロダクションコードでは使用できません。問題はテーブルの構造でなければなりません。どこかで私は間違いを犯しました。 –

'padding'フィックスがあっても、まだオーバーフローしているようです。（ –

メールにzurb foundationを使用する代わりに、MJMLを強くお勧めします。IMOの方がはるかに簡単です。https://mjml.io/ – RasmusGlenvig

電子メールの基礎 - 小さな列で列と行の位置がずれていますか？

答えて

関連する問題