Question

我正在尝试创建一个电子邮件模板。我无法找到剩下的两个问题的答案。

我似乎无法消除三个未嵌套的表之间的空白。我希望他们在彼此之上。

我已经查看了这篇文章以及其他一些内容，但未能找到有效的内容：extra white space between tables in html email for gmail client
在中间的白色表中包含文本，我还没有找到一种方法来消除表格右边和底部的边框阴影。我需要它周围的边框，但希望它具有一致的颜色。

我查看了使用以下内容的帖子，但没有帮助。

<style type="text/css">
    table td {border-collapse: collapse;}
  </style>

以下是实际代码，我感谢其他人可以提供的任何输入。

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <table style="height: 19px; background-color: #f3a601; margin-left: auto; margin-right: auto;" width="600">
         <tbody>
            <tr>
               <td style="width: 588px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://static.mago.co/6e47bc6a7def11e193654040b5df84c1/Media/CKM_email_template_banner_with_Mr_F.png" alt="" width="584" height="118" /></td>
            </tr>
         </tbody>
      </table>
      <br />
      <table style="width: 600px; border-color: #f3a601; background-color: #ffffff; margin-left: auto; margin-right: auto;" border="5px">
         <tbody>
            <tr>
               <td style="border: 2px solid #ffffff;">&nbsp;This is just a test.<br /><br />TEsting.<br /><br /><br /><br /><br /><br /><br /></td>
            </tr>
         </tbody>
      </table>
      <br />
      <table style="height: 78px; background-color: #f3a601; margin-left: auto; margin-right: auto;" width="600">
         <tbody>
            <tr>
               <td style="width: 590px;">
                  <table style="width: 590px; margin-left: auto; margin-right: auto;">
                     <tbody>
                        <tr>
                           <td style="text-align: center;"><span style="font-size: 18px;">Connect With Us!</span></td>
                        </tr>
                     </tbody>
                  </table>
                  <br />
                  <table style="width: 590px; margin-left: auto; margin-right: auto;">
                     <tbody>
                        <tr style="text-align: center;">
                           <td><span style="font-size: 12px;"><a href="http://www.facebook.com/comedykidsmagic" target="_blank" rel="noopener noreferrer">Facebook</a><br /><img src="http://static.mago.co/6e47bc6a7def11e193654040b5df84c1/Media/Facebook.png" alt="Facebook icon" width="25" height="25" /><br /></span></td>
                           <td><span style="font-size: 12px;"><a href="http://www.twitter.com/comedykidsmagic" target="_blank" rel="noopener noreferrer">Twitter</a><br /><img src="http://static.mago.co/6e47bc6a7def11e193654040b5df84c1/Media/Twitter.png" alt="Twitter icon" width="25" height="25" /><br /></span></td>
                           <td><span style="font-size: 12px;">Google Plus<br /><img src="http://static.mago.co/6e47bc6a7def11e193654040b5df84c1/Media/Google_.png" alt="Google+ icon" width="25" height="25" /><br /></span></td>
                           <td><span style="font-size: 12px;">YouTube<br /><img src="http://static.mago.co/6e47bc6a7def11e193654040b5df84c1/Media/YouTube.png" alt="YouTube icon" width="25" height="25" /><br /></span></td>
                        </tr>
                     </tbody>
                  </table>
               </td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Answer 1

使用<table cellpadding="0" cellspacing="0">，因为这是针对html电子邮件的，也会删除br之间的table

Answer 2

要消除边框阴影，请添加：

border-style: solid

对桌上的造型。

您也可以设置：

display: table-inline

在表格样式上删除最后两个表格之间的空白。

需要消除两个相邻表之间的空间

2 个答案: