修复了HTML表格布局的宽度

时间:2017-07-31 20:33:00

标签: html html-table fixed-width

有谁能告诉我为什么这个布局中的行会打破宽度?我知道它是一个固定宽度的静态布局,它是一个在线混乱,但这是我们需要使用的,直到我可以开发流畅/响应布局。

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



<!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;">
					<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>
&#13;
&#13;
&#13;

1 个答案:

答案 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>

希望这有帮助! :)