为什么我的嵌套 table 呈现在 DOM 中的 table 之外？
Why is my nested table rendering outside the table in DOM?
我正在创建一封电子邮件，我有一个主 table，然后在其中嵌套了 table。我的一个 table 显示在 DOM 上的 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 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
为什么 table 狂热？很多人都遇到了很多麻烦，这简直就是糟糕的设计。使用 DIV 元素来 space 出你的页面，当你想显示 table 时使用 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>
更新：如果您真的需要使用 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 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>
结果也可以在这个fiddle上看到：https://jsfiddle.net/k3pykzLy/
您在有问题的桌子周围遗漏了一个 td 标签。
第 122 和 147 行（'ICON POINTS' 模块）需要 <td> 和 </td>.
您的页眉模块中还缺少一个 <tr> 标签
我正在创建一封电子邮件，我有一个主 table，然后在其中嵌套了 table。我的一个 table 显示在 DOM 上的 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 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
为什么 table 狂热？很多人都遇到了很多麻烦，这简直就是糟糕的设计。使用 DIV 元素来 space 出你的页面，当你想显示 table 时使用 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>
更新：如果您真的需要使用 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 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>
结果也可以在这个fiddle上看到：https://jsfiddle.net/k3pykzLy/
您在有问题的桌子周围遗漏了一个 td 标签。
第 122 和 147 行（'ICON POINTS' 模块）需要 <td> 和 </td>.
您的页眉模块中还缺少一个 <tr> 标签