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

Question

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

三个table之间没有嵌套的白色space好像没法去掉。我希望它们彼此重叠。

我已经看过这个 post 和其他一些但没找到任何有用的东西：extra white space between tables in html email for gmail client
中间白色table包含文字，我还没找到消除table右边和底部的边框底纹的方法。我需要它周围的边框，但希望它具有一致的颜色。

我看过 post 说要使用以下内容但没有帮助。

<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 的电子邮件，同时删除 tables

之间的 br

Answer 2

要消除边框阴影，添加：

border-style: solid

到 table 上的样式。

您还可以设置：

display: table-inline

在 table 样式中删除最后两个 table 之间的空白。

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

Need to eliminate space between two adjacent tables

html

css

html-table

html-email