☰

表のセルと行の間のスペースを削除する 質問する

tag-icon • tag-icon css html-table html-email
表のセルと行の間のスペースを削除する 質問する

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

ここに画像の説明を入力してください

<!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>

赤い枠線はセルのアウトラインを表示するためだけに存在します。最終バージョンでは赤い枠線は不要です。

ベストアンサー1

の属性値border-collapse: collapseに追加しますstyle内側 table要素。代わりにそこに属性を追加することもできますcellspacing=0が、その場合、セル間に二重の境界線が表示されます。

つまり:

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

おすすめ記事