html - 表格边框不适用于所有面

Question

我有一张带有左边框和右边框的表格，但在表格的一部分中没有应用它。当我在其中有一些其他嵌套表格时，表格边框显示得很好。当我删除它们以简化框时，边框突然不适用于右下角。

这是一张图片:

这是我的代码:

        <!-- 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&nbsp;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;">&nbsp;
                                
                                </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;">&nbsp;
                    
                    </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">&nbsp;</td>
        </tr>
    </table>
    <!-- End Info Box -->

Answer 1

有问题的 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。