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

【问题标题】：Need to eliminate space between two adjacent tables需要消除两个相邻表之间的空间
【发布时间】：2017-10-21 11:13:44
【问题描述】：

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

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

我已经看过这篇文章和其他一些帖子，但没有找到任何有用的东西：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>

【问题讨论】：

标签： html css html-table html-email

【解决方案1】：

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

【讨论】：

Dippas，感谢您的快速回复。删除修复了表格间距问题。再次感谢。

【解决方案2】：

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

border-style: solid

到桌子上的样式。

你也可以设置：

display: table-inline

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

【讨论】：

詹姆斯，感谢您的快速回复。将border-style:solid 添加到表格样式中确实解决了边框阴影问题。谢谢你。我还将 display: table-inline 添加到表格底部的表格样式中，但这并没有改变表格之间的间距。其他想法？