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

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

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

    我已经看过这篇文章和其他一些帖子,但没有找到任何有用的东西:extra white space between tables in html email for gmail client

  2. 在中间的白色表格中包含文字,我还没有找到消除表格右侧和底部边框阴影的方法。我需要它周围的边框,但希望它具有一致的颜色。

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

<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】:

    使用&lt;table cellpadding="0" cellspacing="0"&gt;,因为这是用于html电子邮件,也删除tables之间的br

    【讨论】:

    • Dippas,感谢您的快速回复。删除 修复了表格间距问题。再次感谢。
    【解决方案2】:

    要消除边框阴影,请添加:

    border-style: solid
    

    到桌子上的样式。

    你也可以设置:

    display: table-inline
    

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

    【讨论】:

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