web-dev-qa-db-ja.com

GmailクライアントのHTMLメールのテーブル間の余分な空白

私のコードは

http://jsfiddle.net/user1212/G86KE/4/

問題はGmailで、同じセル内の2つのテーブルの間に余分な空白が残ることです。私が試してみました display:block; margin:0; padding:0; line-height:0;

しかし、それは消えないようです。

enter image description here

これに対する修正はありますか？

htmlcsshtml-email
13
user544079

HTMLメールのスタイル設定は恐ろしいです。

いくつかのヒント：

border-spacing:0; /*this should fix the spacing problem*/

これを使用しているすべてのテーブルに適用する必要があるので、次のように上部の<style>ブロックに含める必要があります。

<head>
  <style>
    table {border-spacing: 0;}
  </style>
</head>

（形式が正しくないため申し訳ありませんが、コードが複数行に正しく表示されませんでした）

5
Anders Arpi

画像タグでstyle = "display：block"を使用すると機能するはずです。また、忘れないでくださいを使用している場合は、スペーサーイメージに追加します。

11
Hannah F Hudson

style="line-height:50%"を<table>に追加するだけです。メーラーにテキストがある場合、これがテキスト行の高さに影響することに気づくでしょう。これを修正するには、style="line-height:100%"に<td>をテキストとともに追加する必要があります。

2
Mandlaness

これはあなたが探しているものではないことは知っていますが、...
レスポンシブなメール（spacer.gif）を緩めます。レスポンシブな電子メールの大きなスペースを緩めるには、すべての画像をブロックで表示するよりも、行ごとに1つのセルに埋め込む必要があります。
それが役に立てば幸い、これは私が私のケースで使用したソリューションでした。
行ごとに1つのセル：

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="image.jpg" width="600" height="300" />
        </td>
    </tr>
</table>
2
sealview

display:block私の体とフッターの間のギャップの問題にうまく働きましたが、それは私のヘッダーには何もしませんでした。他の修正も行いませんでした。私はこれが古いスレッドであることを知っていますが、誰かがそれに遭遇し、上記が役に立たなかった場合、これは私のためにそれをしました：

追加 style="line-height:1px; font-size:0.0em;"から<td>ヘッダーテーブルを含むタグ。

あなたは正しいものを見つけるためにいくつかの異なるタグを試す必要があるかもしれませんが、それは試す別の解決策です。

1
jrod

だから、これは少しワイルドに見えるかもしれませんが、まったく同じ問題があり、コードのbrsであることがわかりました。はい、tdsをネストしてHTMLをフォーマットしたため、Gmailにbrタグを含む新しいtdsが追加されました。

メールに追加する前に、メールのヘッダーとフッターのコードをテキストに変換していることを理解するのに時間がかかりました。

同様のアプローチを使用している場合は、HTMLを「縮小」することをお勧めします。

の代わりに：

<table>
    <tr>
        <td>
            Content
        </td>
    </tr>
</table>

試してください：

<table><tr><td>Content</td></tr></table>

見た目は恐ろしいです。

1
ariebear

まあ、私はヘッダーとボディのコンテンツが実際には別のセル内のテーブルであることに気づきました。ヘッダーと本文を分離して、分離した行に移動してみませんか？

このようなもの：

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
       <!-- Header table -->
    </td>
  </tr>

  <tr>
    <td>
       <!-- Body table -->
    </td>
  </tr>
</table>

また、ヒントにすぎませんが、<center>タグを使用して中心に配置しないでください。テーブルセル内にいる場合は、align="center"を使用します。これは、テーブル全体にも適用されるため、テーブルを中央揃えにするには、alignプロパティをcenterに設定するだけです。

0
cristianbote

imgにdisplay:blockを追加するほかに、tableにcellpadding="0" cellspacing="0" border="0"も追加します（重要：これをラッピングtableにも適用することを忘れないでください）

乾杯

0
vaskort