2017-07-31 64 views
0

谁能告诉我为什么这个布局中的行突破了宽度?我知道这是一个固定宽度的静态布局,这是一个内联混乱,但这是我们需要使用,直到我可以开发流体/响应布局。固定的HTML表格布局突破宽度

自学的编码器,所以这里可能有很多我做错了。布局应该是单列,底部需要一行,需要3个表格单元格,如代码片段所示。

<!doctype html> 
 
<html> 
 
<head><title>JFG eNewsletter</title></head> 
 
<body> 
 
<table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0"> 
 
\t <tr> 
 
\t \t <td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;"> 
 
\t \t \t <table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0"> 
 
\t \t \t \t <tr style="background-color: #72113D; width: 600px;"> 
 
\t \t \t \t \t <td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0"> 
 
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/" title="johnsonbank.com"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" /></a> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5"> 
 
\t \t \t \t \t \t Make the Most of Your Business<br /> 
 
\t \t \t \t \t \t <a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;">&nbsp;|&nbsp;</span> 
 
\t \t \t \t \t \t <a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;">&nbsp;|&nbsp;</span> 
 
\t \t \t \t \t \t <a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr style="background-color: #82204C; height: 15px;"> 
 
\t \t \t \t \t <td align="center" colspan="5"></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr style="width: 600px; max-width: 600px;"> 
 
\t \t \t \t \t <td align="center" colspan="5"> 
 
\t \t \t \t \t \t <a href="" title=""><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" /></a> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr style="background-color: #E4E0D6; height: 15px;"> 
 
\t \t \t \t \t <td align="center" colspan="5"></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;"> 
 
\t \t \t \t \t <td align="left" style="padding: 20px 20px 10px 20px;" colspan="5"> 
 
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #72113D; font-size: 21px; font-weight: bold;">TITLE</a> 
 
\t \t \t \t \t \t <br />BODY TEXT HERE...&nbsp;<a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #4583A6; font-weight: bold;">Read more</a> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;"> 
 
\t \t \t \t \t <td align="left" style="padding: 20px 20px 10px 20px;" colspan="5"> 
 
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #72113D; font-size: 21px; font-weight: bold;">TITLE</a> 
 
\t \t \t \t \t \t <br />BODY TEXT HERE...&nbsp;<a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #4583A6; font-weight: bold;">Read more</a> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;"> 
 
\t \t \t \t \t <td align="left" style="padding: 20px 20px 20px 20px;" colspan="5"> 
 
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #72113D; font-size: 21px; font-weight: bold;">TITLE</a> 
 
\t \t \t \t \t \t <br />BODY TEXT HERE...&nbsp;<a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #4583A6; font-weight: bold;">Read more</a> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td align="center" colspan="5"> 
 
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/Resources/Articles?sortBy=&filterBy=%7B0b834bec-aecc-4625-b69e-c8a83f0eeabc%7D&selectItem=%7B0b834bec-aecc-4625-b69e-c8a83f0eeabc%7D"><img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" /></a> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr style="background-color: #E4E0D6; height: 138px;"> 
 
\t \t \t \t \t <td align="center" colspan="5"> 
 
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/Business/Banking/Business-Mobile-Banking" title=""><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" /></a> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr align="center" style="background-color: #FFFFFF;"> 
 
\t \t \t \t \t <td align="center" colspan="5"> 
 
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/Resources/Articles/" title="Articles"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" /></a><a href="https://www.johnsonbank.com/Resources/Calculators/" title="Calculators"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" /></a><a href="https://www.johnsonbank.com/Resources/Events/" title="Events"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" /></a> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr style="background-color: #82204C; height: 15px;"> 
 
\t \t \t \t \t <td align="center" colspan="5"></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr align="center" style="background-color: #72113D;"> 
 
\t \t \t \t \t <td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1"> 
 
\t \t \t \t \t \t <table align="center" width="220"> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td align="center" style="padding-bottom: 5px;"><a href="https://www.johnsonbank.com/" title="Johnson Bank"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" /></a></td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td align="center"> 
 
\t \t \t \t \t \t \t \t \t <a href="http://www.linkedin.com/company/johnson-bank/" title="Johnson Bank LinkedIn"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" /></a>&nbsp; 
 
\t \t \t \t \t \t \t \t \t <a href="https://www.facebook.com/johnsonbank/" title="Johnson Bank Facebook"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" /></a>&nbsp; 
 
\t \t \t \t \t \t \t \t \t <a href="https://twitter.com/JohnsonBank/" title="Johnson Bank Twitter"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" /></a>&nbsp; 
 
\t \t \t \t \t \t \t \t \t <a href="https://www.youtube.com/channel/UCODxjMU3HSr7G32b5JAYwKQ/" title="Johnson Bank YouTube Channel"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" /></a> 
 
\t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1"> 
 
\t \t \t \t \t \t <table align="center" width="170"> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td align="center" style="padding-bottom: 5px;"> 
 
\t \t \t \t \t \t \t \t \t <a href="https://www.johnsonins.com/" title="Johnson Insurance/" target="blank"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" /></a> 
 
\t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td align="center"> 
 
\t \t \t \t \t \t \t \t \t <a href="http://www.linkedin.com/company/johnson-insurance/" title="Johnson Insurance LinkedIn"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" /></a>&nbsp; 
 
\t \t \t \t \t \t \t \t \t <a href="https://www.facebook.com/JohnsonInsuranceServicesLLC/" title="Johnson Insurance Facebook"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" /></a> 
 
\t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1"> 
 
\t \t \t \t \t \t <table align="center" width="150"> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td align="center" style="padding-bottom: 5px;"> 
 
\t \t \t \t \t \t \t \t \t <a href="http://www.clearygulladvisors.com/" title="Cleary Gull Advisors" target="blank"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" /></a> 
 
\t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td align="center"> 
 
\t \t \t \t \t \t \t \t \t <a href="https://www.linkedin.com/company/cleary-gull/" title="Cleary Gull Advisors LinkedIn"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" /></a> 
 
\t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block;"> 
 
\t \t \t \t \t <td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0"> 
 
\t \t \t \t \t \t <img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" /> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5"> 
 
\t \t \t \t \t \t <strong>Johnson Bank, Member FDIC&nbsp;|&nbsp;Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non&dash;depository investment products offered and sold through Johnson Bank and Cleary Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non&dash;depository investment products are subject to investment risks, including possible loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group. 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;"> 
 
\t \t \t \t \t <td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5"> 
 
\t \t \t \t \t \t <a href="http://app.subscribermail.com/unsub.cfm?tempid=%_tempid%&mailid=%_mailid%" title="Unsubscribe" style="color: #454646; text-decoration: none;">Unsubscribe or update your email address</a>&nbsp;|&nbsp;555 Main Street&nbsp;|&nbsp;Racine, WI 53403 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t </td> 
 
\t </tr> 
 
</table> 
 
</body> 
 
</html>

+0

你是指脚注? – circusdei

+0

是的,它打破了页眉和页脚。 –

回答

1

如果你在谈论刚刚超过你的页脚比其他部分稍窄行了,所有你需要做的是确保的600px行一定的宽度加上width: 600px内嵌到相关<tr>元素:

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>JFG eNewsletter</title> 
 
</head> 
 

 
<body> 
 
    <table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0"> 
 
    <tr> 
 
     <td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;"> 
 
     <table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0"> 
 
      <tr style="background-color: #72113D; width: 600px;"> 
 
      <td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0"> 
 
       <a href="https://www.johnsonbank.com/" title="johnsonbank.com"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" /></a> 
 
      </td> 
 
      <td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5"> 
 
       Make the Most of Your Business<br /> 
 
       <a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;">&nbsp;|&nbsp;</span> 
 
       <a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;">&nbsp;|&nbsp;</span> 
 
       <a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a> 
 
      </td> 
 
      </tr> 
 
      <tr style="background-color: #82204C; height: 15px;"> 
 
      <td align="center" colspan="5"></td> 
 
      </tr> 
 
      <tr style="width: 600px; max-width: 600px;"> 
 
      <td align="center" colspan="5"> 
 
       <a href="" title=""><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" /></a> 
 
      </td> 
 
      </tr> 
 
      <tr style="background-color: #E4E0D6; height: 15px;"> 
 
      <td align="center" colspan="5"></td> 
 
      </tr> 
 
      <tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;"> 
 
      <td align="left" style="padding: 20px 20px 10px 20px;" colspan="5"> 
 
       <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #72113D; font-size: 21px; font-weight: bold;">TITLE</a> 
 
       <br />BODY TEXT HERE...&nbsp;<a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #4583A6; font-weight: bold;">Read more</a> 
 
      </td> 
 
      </tr> 
 
      <tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;"> 
 
      <td align="left" style="padding: 20px 20px 10px 20px;" colspan="5"> 
 
       <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #72113D; font-size: 21px; font-weight: bold;">TITLE</a> 
 
       <br />BODY TEXT HERE...&nbsp;<a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #4583A6; font-weight: bold;">Read more</a> 
 
      </td> 
 
      </tr> 
 
      <tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;"> 
 
      <td align="left" style="padding: 20px 20px 20px 20px;" colspan="5"> 
 
       <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #72113D; font-size: 21px; font-weight: bold;">TITLE</a> 
 
       <br />BODY TEXT HERE...&nbsp;<a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #4583A6; font-weight: bold;">Read more</a> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td align="center" colspan="5"> 
 
       <a href="https://www.johnsonbank.com/Resources/Articles?sortBy=&filterBy=%7B0b834bec-aecc-4625-b69e-c8a83f0eeabc%7D&selectItem=%7B0b834bec-aecc-4625-b69e-c8a83f0eeabc%7D"><img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" /></a> 
 
      </td> 
 
      </tr> 
 
      <tr style="background-color: #E4E0D6; height: 138px;"> 
 
      <td align="center" colspan="5"> 
 
       <a href="https://www.johnsonbank.com/Business/Banking/Business-Mobile-Banking" title=""><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" /></a> 
 
      </td> 
 
      </tr> 
 
      <tr align="center" style="background-color: #FFFFFF;"> 
 
      <td align="center" colspan="5"> 
 
       <a href="https://www.johnsonbank.com/Resources/Articles/" title="Articles"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" /></a> 
 
       <a href="https://www.johnsonbank.com/Resources/Calculators/" title="Calculators"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" /></a> 
 
       <a href="https://www.johnsonbank.com/Resources/Events/" title="Events"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" /></a> 
 
      </td> 
 
      </tr> 
 
      <tr style="background-color: #82204C; height: 15px;"> 
 
      <td align="center" colspan="5"></td> 
 
      </tr> 
 
      <tr align="center" style="background-color: #72113D;"> 
 
      <td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1"> 
 
       <table align="center" width="220"> 
 
       <tr> 
 
        <td align="center" style="padding-bottom: 5px;"> 
 
        <a href="https://www.johnsonbank.com/" title="Johnson Bank"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" /></a> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td align="center"> 
 
        <a href="http://www.linkedin.com/company/johnson-bank/" title="Johnson Bank LinkedIn"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" /></a>&nbsp; 
 
        <a href="https://www.facebook.com/johnsonbank/" title="Johnson Bank Facebook"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" /></a>&nbsp; 
 
        <a href="https://twitter.com/JohnsonBank/" title="Johnson Bank Twitter"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" /></a>&nbsp; 
 
        <a href="https://www.youtube.com/channel/UCODxjMU3HSr7G32b5JAYwKQ/" title="Johnson Bank YouTube Channel"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" /></a> 
 
        </td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
      <td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1"> 
 
       <table align="center" width="170"> 
 
       <tr> 
 
        <td align="center" style="padding-bottom: 5px;"> 
 
        <a href="https://www.johnsonins.com/" title="Johnson Insurance/" target="blank"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" /></a> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td align="center"> 
 
        <a href="http://www.linkedin.com/company/johnson-insurance/" title="Johnson Insurance LinkedIn"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" /></a>&nbsp; 
 
        <a href="https://www.facebook.com/JohnsonInsuranceServicesLLC/" title="Johnson Insurance Facebook"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" /></a> 
 
        </td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
      <td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1"> 
 
       <table align="center" width="150"> 
 
       <tr> 
 
        <td align="center" style="padding-bottom: 5px;"> 
 
        <a href="http://www.clearygulladvisors.com/" title="Cleary Gull Advisors" target="blank"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" /></a> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td align="center"> 
 
        <a href="https://www.linkedin.com/company/cleary-gull/" title="Cleary Gull Advisors LinkedIn"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" /></a> 
 
        </td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
      </tr> 
 
      <tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block; width: 600px;"> 
 
      <td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0"> 
 
       <img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" /> 
 
      </td> 
 
      <td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5"> 
 
       <strong>Johnson Bank, Member FDIC&nbsp;|&nbsp;Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non&dash;depository investment products offered and sold through Johnson Bank and Cleary 
 
       Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non&dash;depository investment products are subject to investment risks, including possible 
 
       loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group. 
 
      </td> 
 
      </tr> 
 
      <tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;"> 
 
      <td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5"> 
 
       <a href="http://app.subscribermail.com/unsub.cfm?tempid=%_tempid%&mailid=%_mailid%" title="Unsubscribe" style="color: #454646; text-decoration: none;">Unsubscribe or update your email address</a>&nbsp;|&nbsp;555 Main Street&nbsp;|&nbsp;Racine, 
 
       WI 53403 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

希望这有助于! :)

+0

我是第一次这样做,它没有帮助控制布局。我已将它们添加回来,但仍存在相同的问题。我会尝试添加屏幕截图来展示我的意思。该布局在Dreamweaver中查找,但在Outlook中测试时,布局正在打破。它可能是显示:inline-block;贯穿始终? –

+0

啊,我最初并没有看到那些。是的,'display:inline-block'很可能会干扰。你正在处理一个**表**,默认情况下它使用'display:table-row'和'display:table-cell'。 'display:inline-block'在技术上*作为'table'或'table-row'的子元素是无效的,所以它不应该在行内嵌入''或'​​'元素。我尝试删除所有这些,并且它可以正常工作,但是会破坏**上面的那一行**您遇到问题的那个(由于单元格的宽度不够)。我建议删除所有'display:inline-block',然后调整该行的宽度:) –