电子邮件开发页脚表小于正文表

Question

我正在开发响应式电子邮件。我的页脚表的宽度与我的身体表的宽度不同，这很奇怪。我试图弄清楚为什么会这样。我已经给自己发送了一封测试电子邮件，并且我的iPhone X Mail应用程序也看到了这种情况。所有表都具有相同的CSS，因此我对所发生的事情感到非常困惑。任何帮助都可以！我也附上了屏幕截图，但这是下面的代码：

CSS

<style type="text/css">
* { 
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}

body {
    -webkit-font-smoothing: antialiased; 
    -webkit-text-size-adjust: none; 
    width: 100% !important; 
    height: 100%;
    color: #000;
}

img { 
    max-width: 100%; 
    display: block;
    border: none;
    outline: none;
}

.collapse {
    margin: 0;
    padding: 0;
}

.container {
    display: block !important;
    max-width: 600px !important;
    margin: 0 auto !important; 
    clear: both !important;
    background-color: #FFF;
}

.content {
    max-width: 600px;
    margin: 0 auto;
    display: block; 
}

.content table, .content table tr, .content table tr td  { 
    max-width: 100%; 
    border-collapse: collapse;
    border: none;
    outline: none;
    border-spacing: 0;
}

.clear { 
    display: block; 
    clear: both; 
}

table {
    width: 100%;
    display: table;
}

.two-col table {
    width: 300px;

}

.three-col table {
    width: 200px;
}

.pad--left {
        padding-left: 25px;
    }

@media only screen and (max-width: 480px) {

    .full table {
        width: 100%; 
    }
    .pad--left {
        padding-left: 100px;
    }

}

这是我的HTML：

    <!-- BODY -->
<table cellspacing="0" cellpadding="0">
    <tr>
        <td></td>
        <td class="container">
            <div class="content">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" style="padding-top: 15px; padding-bottom: 45px;">
                            <img src="/All-Wall-LogoBanner.png" alt="logo" />
                        </td>
                    </tr>
                </table>
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center"> 
                            <table cellspacing="0" cellpadding="0" style="background-image: linear-gradient(to right, #EFEFEF , #FFF);">
                                <tr>
                                    <td align="center" style="padding-top: 40px;">
                                        <img src="tilted-cart.png" alt="cart icon" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center">
                                        <h3 style="display: inline-block; font-weight: 400; font-size: 40px;padding-top: 5px; padding-bottom: 65px; text-transform: uppercase;">Thank You For <br>Your Business</h3>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" style="background-image: url(/worker-bg.png); background-repeat: no-repeat; background-size: cover; background-position: right; padding-top: 45px; padding-bottom: 85px;">
                            <h2 style="color: #FFF; text-transform: uppercase; font-size: 44px; margin-bottom: 15px;">Hurry while It’s<br>still in stock</h2>
                            <a href="#" style="color: #FFF; text-transform: uppercase; font-size: 16px; font-weight: 600;">Return to your cart</a>
                        </td>
                    </tr>
                </table>
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="three-col full" style="padding-top: 15px; padding-bottom: 15px; background-color: #00549A; color: #FFF; text-transform: uppercase;">
                            <div class="wrap" style="display: table; text-align: center;">
                                <table cellspacing="0" cellpadding="0"  width="200" align="center" border="0" style="display: inline-block;">
                                    <tr>
                                        <td align="center" class="pad--left"><img src="/satisfaction.png" alt="satisfaction icon" style="padding: 5px;" /></td>
                                        <td align="left">Satisfaction<br>Guarantee</td>
                                    </tr>
                                </table>
                                <table cellspacing="0" cellpadding="0"  width="200" align="center" border="0" style="display: inline-block;">
                                    <tr>
                                        <td align="center" class="pad--left"><img src="/fastship.png" alt="fast ship icon" style="padding: 5px;" /></td>
                                        <td align="left">Fast<br>Shipping</td>
                                    </tr>
                                </table>
                                <table cellspacing="0" cellpadding="0"  width="200" align="center" border="0" style="display: inline-block;">
                                    <tr>
                                        <td align="center" class="pad--left"><img src="/freeship.png" alt="free ship icon" style="padding: 5px;" /></td>
                                        <td align="left">Many items<br>Ship free</td>
                                    </tr>
                                </table>    
                            </div>      
                        </td>
                    </tr>
                </table>
            </div>

        </td>
        <td></td>
    </tr>
</table><!-- /BODY -->
<!-- FOOTER -->
<table cellspacing="0" cellpadding="0">
    <tr>
        <td></td>
        <td class="container">
            <!-- content -->
            <div class="content">
                <table cellspacing="0" cellpadding="0" style="width: 100%;">
                    <tr>
                        <td align="center" style="padding-top: 45px; padding-left: 15px; padding-right: 15px;">
                            <a href="#" style="text-decoration: none;"><img src="/instagram.png" alt="instagram" style="padding: 1px; margin: 15px; width: 30px; height: 30px; display: inline-block;" /></a>
                            <a href="#" style="text-decoration: none;"><img src="/facebook.png" alt="facebook" style="padding: 1px; margin: 15px; width: 15px; height: 30px; display: inline-block;" /></a>
                            <a href="#" style="text-decoration: none;"><img src="/twitter.png" alt="twitter" style="padding: 1px; margin: 15px; width: 30px; height: 24px; display: inline-block;" /></a>
                            <a href="#" style="text-decoration: none;"><img src="/youtube.png" alt="youtube" style="padding: 1px; margin: 15px; width: 30px; height: 22px; display: inline-block;" /></a>
                        </td>
                    </tr>

                    <tr>
                        <td align="center" style="padding-left: 15px; padding-right: 15px; font-weight: bold; font-size: 14px;">
                            Download our mobile app
                        </td>
                    </tr>

                    <tr>
                        <td align="center" style="padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px;">
                            <a href="#" style="text-decoration: none;">
                                <img src="/appstore.png" alt="appstore" style="padding: 1px; width: 140px; display: inline-block;" />
                            </a>
                            <a href="#" style="text-decoration: none;">
                                <img src="/googleplay.png" alt="google play" style="padding: 1px; width: 140px; display: inline-block;" />
                            </a>
                            <hr style="margin-top: 45px; margin-bottom: 0px; width: 60%; margin-left: auto; margin-right: auto;">
                        </td>
                    </tr>

                    <tr>
                        <td align="center" style="padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px;">
                            <a href="#" style="font-weight: bold; font-size: 11px; text-transform: uppercase; color: #000; text-decoration: none;">Forward to a friend</a> | 
                            <a href="#" style="font-weight: bold; font-size: 11px; text-transform: uppercase; color: #000; text-decoration: none;">Manage Preferences</a> | 
                            <a href="#" style="font-weight: bold; font-size: 11px; text-transform: uppercase; color: #000; text-decoration: none;">Unsubscribe</a>
                        </td>
                    </tr>

                    <tr>
                        <td align="center" style="padding-bottom: 45px; padding-top: 15px; padding-left: 15px; padding-right: 15px; color: #707070; font-size: 11px;">
                            This email was sent to [email protected] by All-Wall Equipment Co., Inc.
                            <br>
                            6561 W Post Rd | Las Vegas | NV | 89118
                        </td>
                    </tr>

                </table>
            </div><!-- /content -->     
        </td>
        <td></td>
    </tr>
</table><!-- /FOOTER -->

Answer 1

我想通了！！！我将正文，页脚和页眉包裹在另一张桌子中，并为我固定了它。大！