Question

我正在创建一个电子邮件模板以发送给少数人，但是，出于某种原因，我遇到了一些麻烦，在右侧的两个表格单元格上放置一个简单的左侧边框。

enter image description here

<table class="content" style="table-layout:fixed; background: none repeat scroll 0% 0% #FFFFFF; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#FFFFFF">
<thead cellspacing="0" cellpadding="0" border="0">
    <tr style="width: 100%; background: red;" bgcolor="red" cellspacing="0" cellpadding="0" border="0">
        <td style="width: 70%;" rowspan="2" align="left" valign="middle" colspan="8" cellspacing="0" cellpadding="0" border="0">
            <h1>
                <a style="text-decoration: none; font-weight: normal; letter-spacing: -1.5px; line-height: 22px; color: #ffffff; font-size: 22px; padding: 20px 20px 20px 20px;" href="#">
                    <img src="http://dummyimage.com/178x32/000000/fff.jpg&text=Image" alt="image" width="178" height="32" />
                </a>
            </h1>
        </td>
        <td style="width: 30%; border-left: 1px solid #FFFFFF;" align="right" colspan="4" cellspacing="0" cellpadding="0" border="0">
            <table cellspacing="0" cellpadding="0" border="0">
                <tbody cellspacing="0" cellpadding="0" border="0">
                    <tr cellspacing="0" cellpadding="0" border="0">
                        <td cellspacing="0" cellpadding="0" border="0" style="color: #ffffff; text-align: center; padding: 20px 20px 20px 20px; border-bottom: 1px solid #FFFFFF; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;">Ipsum Dolor Sit</td>
                    </tr>

                    <tr cellspacing="0" cellpadding="0" border="0">
                        <td cellspacing="0" cellpadding="0" border="0" style="color: #ffffff; text-align: center; padding: 20px 20px 20px 20px;">
                            <a style="text-decoration: none; color: #ffffff; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" href="#" target="_blank">Cras Odio Ligula</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>

JSFiddle

如何删除正在创建的空白区域（可以在垂直和水平行之间找到），以便正确布局模板？

Answer 1

我已经给内部表格（右侧<td>标签内部）宽度为100％而空的空间消失了，因为内部表格跨越整个可用宽度：

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody cellspacing="0" cellpadding="0" border="0">
        ...         
    </tbody>
</table>

如果您没有定义100％的宽度，则表格仅消耗所有内容+填充+边距实际需要的宽度。

Fixed Fiddle

Answer 2

为宽度为30％的'td'内的表格提供100％的宽度。你的问题将得到解决。

Answer 3

更改以下代码：

 <td style="width: 21%; border-left: 1px solid #FFFFFF;" align="right" colspan="4" cellspacing="0" cellpadding="0" border="0">
        <table cellspacing="0" cellpadding="0" border="0">

电子邮件布局中的表格

3 个答案: