我有一张带有左边框和右边框的表格，但在表格的一部分中没有应用它。当我在其中有一些其他嵌套表格时，表格边框显示得很好。当我删除它们以简化框时，边框突然不适用于右下角。
这是一张图片:
这是我的代码:
<!-- Start Info Box -->
<table border="0" cellpadding="0" cellspacing="0" width="532" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td style="padding-top: 20px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-top.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td colspan="3" style="text-align: center; font-family:Arial, Helvetica, sans-serif; color: #001996; font-size: 20px; font-weight: 700; line-height: 22px; padding-top: 5px; padding-bottom: 10px;">
Why choose us?
</td>
</tr>
<tr>
<td width="100%" align="left" style="margin: 0; font-family:Arial, Helvetica, sans-serif; font-size: 13px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; text-align: left; padding-left: 15px; font-weight: 400;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 5px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 5px;">
1-800-YUP-1999
</td>
<td style="padding-right: 5px; padding-bottom: 5px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/chat.png" alt="Chat" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 5px; padding-right: 15px;">
<a style="text-decoration:none; color: #000000;" href="#" target="_blank">Live Chat</a>
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="#" target="_blank">E-mail us</a>
</td>
<td colspan="2" style="padding-bottom: 5px;">
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-top: 10px; padding-bottom: 0px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; margin: 0; font-size: 1px; mso-line-height-rule:exactly; line-height:1px; height:1px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule:exactly;line-height:7px;height:7px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-bottom.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</table>
<!-- End Info Box -->最佳答案
有问题的 td:
<td width="100%" align="left" style="margin: 0; font-family:Arial, Helvetica, sans-serif; font-size: 13px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; text-align: left; padding-left: 15px; font-weight: 400;">
没有右边框。添加它，然后它就可以工作了。
没有:
https://jsfiddle.net/j5ctrrh0/
与:
https://jsfiddle.net/j5ctrrh0/1/
这是因为您在中间表上使用了 border-collapse:collapse;。您设置 border="0" 的内表现在将与现有边框合并，从而将其移除。请参阅此处(删除折叠，将内表的边框更改为 1，以便您可以看到边框将折叠的位置):
https://jsfiddle.net/j5ctrrh0/2/
因此，在内表上完全折叠且 border=0 时，您需要在相应的 td 上设置边框。
但是，iirc 建议对 html 电子邮件使用 collapse。
关于html - 表格边框不适用于所有面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32119428/