html - 电子邮件布局中的表格单元格

Question

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

<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