web-dev-qa-db-ja.com

テーブルのセルと行の間のスペースを削除する

テーブルの使用を強制する というHTMLメールテンプレートを設計しています。以下のコードでは、（1）プレースホルダー画像の下のスペースを削除し、（2）画像とキャプションの間のスペースを削除するのに問題があります。以下は、OS X 10.6.8でのChrome 15での表示のスクリーンショットです。

enter image description here

<!DOCTYPE HTML>
<html>
<head>
    <title>Email Template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
    <table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
        <tr>
            <td id="main" style="background-color: #f2f2f2;">
                <h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
                <table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
                    <tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr>
                    <tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr>
                </table><!--/.main-story-image-->
                <p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p>
                <p><a href="">Click here to read more </a></p>
                <div style="clear: both;"></div>
            </td><!--/#main-->
        </tr>
    </table>
</body>
</html>

赤い境界線は、セルの輪郭を示すためだけにあります。最終バージョンではそれらは必要ありません。

csshtml-tablehtml-email
45
Joe Mornin

DOCTYPEが画像をインライン要素として表示しているようです。 display: blockを画像に追加すると、問題は解決しました。

59
Joe Mornin

border-collapse: collapseをinnerstyle要素のtable属性値に追加します。代わりに属性cellspacing=0を追加することもできますが、セル間に二重の境界線ができます。

つまり：

<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">
50
Jukka K. Korpela

cellspacing="0"が2回あるので、2番目のものをcellpadding="0"に置き換えてみてください。

9
jezza-tan

同様の問題がありました。これは、主要なメールクライアント全体で役立ちます。追加：

  • 属性cellpadding="0"、cellspacing="0"およびborder="0"テーブルへ
  • スタイル border-collapse: collapse;テーブルへ
  • スタイルpadding: 0; margin: 0;各要素へ
  • およびスタイルfont-size: 0px; line-height: 0px;空の各要素に
6
Petr Hladík

何も機能していません。問題の解決策は次のとおりです。

<style>
table td {
    padding: 0;
}
</style>
5
drupal

中古 font-size:0親を持つTDは画像を持っています。

4
Satish Upadhyay

私は同様の問題を抱えていましたが、次のようにtd要素を（インライン）スタイリングすることで解決しました：

<td style="display: block;">

これはベストプラクティスではありませんが機能します。私の場合、HTMLテーブルを使用してスタイル設定されていた古いテンプレートで作業していました。

2
NJENGAH

display:blockセルのcss、およびvalign="top"トリックを行う必要があります

1
user2115923

こんにちは、@ andrewがmake cellpadding = 0、使用中のスペースがまだ残っている可能性がありますtable border=1。

1
Vijay Kumar

キャプションボックスが灰色の場合は、画像とキャプションを同じ背景色のdivでラッピングしてみてください。つまり、「tr」タグの前に「div」タグを配置します。白ではなく灰色になり、灰色のキャプションの一部のように見えます。

0
amhp