移动表格（在表格内）而不使用边距和div

时间：2018-01-17 10:01:07

标签： html css html-email

我正在尝试创建一个HTML电子邮件，我想定位一个嵌套的table并将其移到父table的顶部（嵌套table将约为{{1}在父10px）下面。

通常table和margins是我的解决方案，但Outlook等客户端不支持div而且div总是很痛苦用于电子邮件。

如果没有上述内容，有没有办法实现这一目标？

如果是这样，怎么样？

这是我到目前为止所拥有的：

＆＃13;
＆＃13; 
margins
＆＃13;
＆＃13;
＆＃13;

透视，文本＆＃34;本月......＆＃34;应该坐在红线上方大约10px。

修改：

现在的样子：

enter image description here

我希望它看起来如何：

enter image description here

我是如何实现上述目标：使用<body style="margin:0;padding:0"> <table bgcolor="#F1F3F2" border="0" cellpadding="0" cellspacing="0" style="background-color:#f1f3f2;" width="100%"> <tbody> <tr> <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;"> <!---------> <!-- TOP --> <!---------> <table border="1" cellpadding="0" cellspacing="0" style="max-width:692px; background-image: url(https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/header-image.png);" width="692" height="400"> <tbody> <tr> <!-- TD for whole top section --> <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding:25px 28px; border: 1px solid red;"> <!---------------------> <!-- LOGO AND SOCIAL --> <!---------------------> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <!-- THIS TABLE NEEDS MOVING UP --> <tbody> <tr> <td align="left" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;"> <a href="http://www.techdata.co.uk/" target="_blank"><img alt="Precise.TV" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/logo.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff"></a> </td> <!-- SOCIAL ICONS --> <td style="text-align: right;"> <!--YouTube --> <a href=""><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/youtube-icon.png"></a> <!--Twitter --> <a href=""><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/twitter-icon.png"></a> <!--LinkedIn --> <a href=""><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/linkedin-icon.png"></a> <!--Facebook --> <a href=""><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/facebook-icon.png"></a> </td> </tr> <!-----------------> <!-- HEADER TEXT --> <!-----------------> <tr> <td style="padding-top:50px;"> <!-- PADDING--> </td> </tr> <tr> <td colspan="2" style="height: 100px; color: #fff; font-family:'Open Sans',Helvetica,Arial,sans-serif; text-align: center; font-size: 26px;"> THIS MONTHS' SHAREABLE<br> MOMENTS FROM PRECISE.TV </td> </tr> </tbody> </table> </table> </body>但我无法使用<table border="1" cellpadding="0" cellspacing="0" width="100%" style="margin-top:-170px;">，因为电子邮件客户端不支持边距。

在代码中还标记了哪个表需要向上移动。

3 个答案:

答案 0 :(得分：0)

将valign="top"属性添加到外部td：

<!-- TD for whole top section -->
    <td valign="top" align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding:25px 28px; border: 1px solid red;">

答案 1 :(得分：0)

我会放一张有两排的桌子。带有文本的第一行，带有另一个较小宽度表的第二行，带有红色背景，居中。

以下是您应该能够使用的一段代码。

＆＃13;
＆＃13; 
    <table cellpadding="0" cellspacing="0" border="0" bgcolor="#000000">
    <tr>
    <td style="color: #fff; font-family:'Open Sans',Helvetica,Arial,sans-serif; text-align: center; font-size: 26px;"> THIS MONTHS' SHAREABLE<br> MOMENTS FROM PRECISE.TV </td>
    </tr>
    <tr>
    <td>
    
        <table cellpadding="0" cellspacing="0" border="0" width="50" align="center">
        <tr>
        <td bgcolor="#ff0000" height="3" style="height:3px; line-height:0px; font-size:0px;"></td>
        </tr>
        </table>
    
    </td>
    </tr>
    </table>
＆＃13;
＆＃13;
＆＃13;

如果这对您有用，请告诉我。

答案 2 :(得分：-1)

  1. 您可以在文字前使用<br>标记＆＃34;本月＆＃34;
  2. 您可以在包含文字
    3. 的行之前添加额外的行<tr> <td>组合

    PS 我注意到td元素缺少colspan="2" 

    <tr>
    <td style="padding-top:50px;">
        <!-- PADDING-->
    </td>
</tr>
相关问题
最新问题