Question

我正在创建一个电子邮件，我有一个主表，然后在其中嵌套表。我的一个表格显示在DOM的表格外面，我无法弄清楚原因。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <title> *|SUBJECT|*</title>
    <style>
    .bodyContent{
        color:#505050;
        font-family:Helvetica;
        font-size:16px;
        line-height:150%;
        padding-top:20px;
        padding-right:20px;
        padding-bottom:20px;
        padding-left:20px;
        text-align:left;
    }
    .bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
        color:#45B5DD;
        font-weight:normal;
        text-decoration:underline;
    }
    .bodyContent img{
        display:inline;
        height:auto;
        max-width:560px;
    }
    .header {
        max-height: 125px;
    }
    .mso-width{
        width: 100%;
    }

    a[href^=tel]{
        color:#ffffff;
        text-decoration:none;
    }
    @media only screen and (max-width: 480px){
        .ds-logo{
            display: block;
            float: none;
            margin: 0 auto;
        }
        .header {
            padding: 10px 0;
        }
        .width-container {
            width: 100% !important;
        }
        .phone-number{
            width: 120px;
            margin: 0 auto;
        }
    }

    </style>
</head>
<body style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; background-color:#f4f4f4; height:100% !important; width:100% !important; ">

    <!-- WRAPPER -->
    <!--[if mso]>
    <style>
    .width-container {
    display: inline;
    width: 600px !important;
}
</style>
<![endif]-->
<table style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td>
            <table style="text-size-adjust: 100%; margin: 0px; background-color: #f4f4f4; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
                <!-- Header -->
                <td class="header mso-width" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; border-top: 0px solid #BBBBBB; max-width: 600px; width: 100% !important;" align="center" bgcolor="#000000" valign="top">

                    <table class="width-container" align="left" border="0" cellspacing="0" cellpadding="0" style="padding-left: 20px; padding-top: 10px; padding-bottom: 10px; width: 300px;">
                        <tr>
                            <td style="background-color: #000000; width: 100%">
                                <img class="ds-logo" src="http://example.com/emails/DS_White_Medium.png" />
                            </td>
                        </tr>
                    </table>
                    <table class="width-container" align="left" bgcolor="#000000" border="0" cellspacing="0" cellpadding="0" style="width: 300px;">
                        <tr>
                            <td style="background-color: #000000; color: #ffffff!important; font-family: Helvetica; font-size: 18px; height: 100%; line-height: 125%; text-align: right; letter-spacing: .0em; padding-right: 20px; padding-top: 20px; text-decoration: none" width="100%">
                                <div class="phone-number">
                                    866.111.1111
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- End Header -->

            </table>
            <!-- Hero Image -->
            <table style="text-size-adjust: 100%; margin: 0px; background-color: #f4f4f4; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; border-top: 0px solid #BBBBBB; height: 100% !important; width: 100% !important;" align="center" valign="top">
                        <img alt="" src="http://example.com/emails/independent/11082016/hero.jpg" style="max-width: 600px" width="100%"/>
                    </td>
                </tr>

            </table>
            <!-- End Hero -->

            <!-- Content -->
            <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td class="bodyContent" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 40px; padding-right: 30px; padding-bottom: 40px; padding-left: 30px; text-align: left;" valign="top">{{lead.First Name:default=Friend}}, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
                </tr>
            </table>
            <!-- End Content -->

            <!-- Icon Points -->
            <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300">
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /><br />
                            </td>
                        </tr>
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality
                            </td>
                        </tr>
                    </table>
                    <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300">
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" />
                            </td>
                        </tr>
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                Custom queues provide structured, user-tailored workflow processes
                            </td>
                        </tr>
                    </table>
                </tr>
            </table>
            <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300">
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /><br />
                            </td>
                        </tr>
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality
                            </td>
                        </tr>
                    </table>
                    <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300">
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" />
                            </td>
                        </tr>
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                Custom queues provide structured, user-tailored workflow processes
                            </td>
                        </tr>
                    </table>
                </tr>
            </table>
            <!-- End Icon Points -->
        </td>
    </tr>
</table>
<!-- End Wrapper -->
</body>
</html>

这是jsfiddle

https://jsfiddle.net/9511L1qb/

Answer 1

你错过了有问题的牌桌周围的td标签。

第122行和第147行（“ICON POINTS”模块）需要<td>和</td>。

您的标题模块中还缺少<tr>标记

Answer 2

为什么桌子狂热？很多人都遇到了很多麻烦，这简直就是糟糕的设计。使用DIV元素分隔页面，在要显示表格时使用TABLE元素。我已经删除了你的代码并创建了一个工作示例，看到可读性的大幅增加？

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <title> *|SUBJECT|*</title>
    <style>
    .bodyContent{
        color:#505050;
        font-family:Helvetica;
        font-size:16px;
        line-height:150%;
        padding-top:20px;
        padding-right:20px;
        padding-bottom:20px;
        padding-left:20px;
        text-align:left;
    }
    .bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
        color:#45B5DD;
        font-weight:normal;
        text-decoration:underline;
    }
    .bodyContent img{
        display:inline;
        height:auto;
        max-width:560px;
    }
    .header {
        max-height: 125px;
    }
    .mso-width{
        width: 100%;
    }

    a[href^=tel]{
        color:#ffffff;
        text-decoration:none;
    }
    @media only screen and (max-width: 480px){
        .ds-logo{
            display: block;
            float: none;
            margin: 0 auto;
        }
        .header {
            padding: 10px 0;
        }
        .width-container {
            width: 100% !important;
        }
        .phone-number{
            width: 120px;
            margin: 0 auto;
        }
    }

    </style>
</head>
<body>
    <!-- WRAPPER -->
    <!--[if mso]>
        <style>
            .width-container {
            display: inline;
            width: 600px !important;
        }
        </style>
    <![endif]-->
    <div style="background-color: #ffffff; max-width: 600px; margin: 0 auto;">
        <div style="background-color: #000000;">
            <img class="ds-logo" style="float: left; margin: 10px 0 0 10px;" src="http://example.com/emails/DS_White_Medium.png" />
            <div class="phone-number" style = "color: white; font-family: Helvetica; font-size: 18px; text-align: right; letter-spacing: .0em; padding-right: 20px; padding-top: 20px; text-decoration: none">
                866.111.1111
            </div>
        </div>
        <div class="bodyContent" style="padding: 40px 30px; text-align: center;">
            <div style="width: 100%;">
                <img alt="" src="http://example.com/emails/independent/11082016/hero.jpg" style="max-width: 600px; margin: 10px auto;" width="100%"/>
                <p style="text-align: left;">{{lead.First Name:default=Friend}}, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
                deserunt mollit anim id est laborum.</p>
            </div>
            <div style="width: 100%; min-height: 300px;">
                <div class="leftblock" style="width: 40%; float: left; clear: left;">
                    <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" />
                    <p style="font-family: Helvetica; font-size: 14px; text-align: left;">Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality</p>
                </div>
                <div class="rightblock" style="width: 40%; float: left; margin-left: 10%;">
                    <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" />
                    <p style="font-family: Helvetica; font-size: 14px; text-align: left;">Custom queues provide structured, user-tailored workflow processes</p>
                </div>
                <div class="leftblock" style="width: 40%; float: left; clear: left;">
                    <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" />
                    <p style="font-family: Helvetica; font-size: 14px; text-align: left;">Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality</p>
                </div>
                <div class="rightblock" style="width: 40%; float: left; margin-left: 10%;">
                    <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" />
                    <p style="font-family: Helvetica; font-size: 14px; text-align: left;">Custom queues provide structured, user-tailored workflow processes</p>
                </div>
            </div>
        </div>
    </div>
<!-- End Wrapper -->
</body>
</html>

更新：如果您确实需要使用表结构，这是一种解决方法：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <title> *|SUBJECT|*</title>
    <style>
    .bodyContent{
        color:#505050;
        font-family:Helvetica;
        font-size:16px;
        line-height:150%;
        padding-top:20px;
        padding-right:20px;
        padding-bottom:20px;
        padding-left:20px;
        text-align:left;
    }
    .bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
        color:#45B5DD;
        font-weight:normal;
        text-decoration:underline;
    }
    .bodyContent img{
        display:inline;
        height:auto;
        max-width:560px;
    }
    .header {
        max-height: 125px;
    }
    .mso-width{
        width: 100%;
    }

    a[href^=tel]{
        color:#ffffff;
        text-decoration:none;
    }
    @media only screen and (max-width: 480px){
        .ds-logo{
            display: block;
            float: none;
            margin: 0 auto;
        }
        .header {
            padding: 10px 0;
        }
        .width-container {
            width: 100% !important;
        }
        .phone-number{
            width: 120px;
            margin: 0 auto;
        }
    }

    </style>
</head>
<body style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; background-color:#f4f4f4; height:100% !important; width:100% !important; ">

    <!-- WRAPPER -->
    <!--[if mso]>
    <style>
    .width-container {
    display: inline;
    width: 600px !important;
}
</style>
<![endif]-->
<table style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td>
            <table style="text-size-adjust: 100%; margin: 0px; background-color: #f4f4f4; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
                <!-- Header -->
                <td class="header mso-width" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; border-top: 0px solid #BBBBBB; max-width: 600px; width: 100% !important;" align="center" bgcolor="#000000" valign="top">

                    <table class="width-container" align="left" border="0" cellspacing="0" cellpadding="0" style="padding-left: 20px; padding-top: 10px; padding-bottom: 10px; width: 300px;">
                        <tr>
                            <td style="background-color: #000000; width: 100%">
                                <img class="ds-logo" src="http://example.com/emails/DS_White_Medium.png" />
                            </td>
                        </tr>
                    </table>
                    <table class="width-container" align="left" bgcolor="#000000" border="0" cellspacing="0" cellpadding="0" style="width: 300px;">
                        <tr>
                            <td style="background-color: #000000; color: #ffffff!important; font-family: Helvetica; font-size: 18px; height: 100%; line-height: 125%; text-align: right; letter-spacing: .0em; padding-right: 20px; padding-top: 20px; text-decoration: none" width="100%">
                                <div class="phone-number">
                                    866.111.1111
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- End Header -->

            </table>
            <!-- Hero Image -->
            <table style="text-size-adjust: 100%; margin: 0px; background-color: #f4f4f4; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; border-top: 0px solid #BBBBBB; height: 100% !important; width: 100% !important;" align="center" valign="top">
                        <img alt="" src="http://example.com/emails/independent/11082016/hero.jpg" style="max-width: 600px" width="100%"/>
                    </td>
                </tr>

            </table>
            <!-- End Hero -->

            <!-- Content -->
            <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td class="bodyContent" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 40px; padding-right: 30px; padding-bottom: 40px; padding-left: 30px; text-align: left;" valign="top">{{lead.First Name:default=Friend}}, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
                </tr>
            </table>
            <!-- End Content -->
            <!-- End Icon Points -->
        </td>
    </tr>
</table>
    <table style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td>    
            <!-- Icon Points -->
            <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300">
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /><br />
                            </td>
                        </tr>
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality
                            </td>
                        </tr>
                    </table>
                    <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300">
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" />
                            </td>
                        </tr>
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                Custom queues provide structured, user-tailored workflow processes
                            </td>
                        </tr>
                    </table>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td>
            <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300">
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /><br />
                            </td>
                        </tr>
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality
                            </td>
                        </tr>
                    </table>
                    <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300">
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" />
                            </td>
                        </tr>
                        <tr>
                            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top">
                                Custom queues provide structured, user-tailored workflow processes
                            </td>
                        </tr>
                    </table>
                </tr>
            </table>
            <!-- End Icon Points -->
        </td>
    </tr>
</table>
<!-- End Wrapper -->
</body>
</html>

结果也可以在这个小提琴上看到：https://jsfiddle.net/k3pykzLy/

为什么我的嵌套表呈现在DOM的表外？

2 个答案: