Question

我正在创建一个发送的电子邮件模板，但出于某种原因，我无法在页脚区域创建两个简单的列。

布局：

enter image description here

代码：

<div style="width: 100%; height: 100%;">
<table style="margin: 0px auto 0px auto; padding: 20px 20px 20px 20px; font: normal 10.5px; color: #777777; width: 100%; height: 100%;" align="center">
    <tbody>
        <tr>
            <td>
                <table class="content" style="background: none repeat scroll 0% 0% #FFFFFF; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
                    <thead>
                        <tr style="display: inline-block; width: 100%; background: #1F1F1F;" bgcolor="#1F1F1F">
                            <td style="width: 100%;" align="left" valign="middle">
                                <h1 style="padding: 15px 15px 15px 15px; color: #FFFFFF;">Test</h1>
                            </td>
                            <td style="border-left: 1px solid #FFFFFF;" align="right">
                                <table cellspacing="0" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; border-bottom: 1px solid #FFFFFF; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px;">test</td>
                                        </tr>
                                        <tr>
                                            <td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px;">test</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                <h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;">&nbsp;</h4>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>test</td>
                            <td>test</td>
                        </tr>
                    </tfoot>
                </table>
            </td>
        </tr>
    </tbody>
</table>

如何修改上面的代码，在页脚区域创建两个简单的列，这些列仍在电子邮件的容器中？

Answer 1

你应该制作简单的html结构，

不要在桌子上摆桌子。你可以使用rowspan。 HTML <th> rowspan Attribute
thead标记中的单元格，建议使用标记HTML <thead> Tag
不要在tr tag

display:inline-block;

如果单元格没有不同的颜色，请将color样式放在tr标记上

<div style="width: 100%; height: 100%;">
<table class="content" style="background: none; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
  <thead>
    <tr style="width: 100%; background: #1F1F1F;color: #FFFFFF;">
        <th style="width: 100%;" align="left" valign="middle" rowspan=2>
             <h1 style="padding: 15px 15px 15px 15px;">test</h1>
        </th>
        <th style="border-left: 1px solid #FFFFFF;border-bottom: 1px solid #FFFFFF;text-decoration: none;text-align: center; padding: 15px 15px" align="right">
            test
        </th>
    </tr>
    <tr style="width: 100%; background: #1F1F1F;color: #ffffff; ">
        <th style="border-left: 1px solid #FFFFFF;text-decoration: none; text-align: center; padding: 15px 15px" align="right">
            test
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td style="background: red;" colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td style="background: red;" colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td style="background: red;" colspan="2">
             <h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;">&nbsp;</h4>

        </td>
    </tr>
    <tr>
        <td style="background: red;" colspan="2">&nbsp;</td>
    </tr>
</tbody>
<tfoot>
    <tr style="width: 100%; background: #1F1F1F; color: #ffffff;">
        <td>test</td>
        <td>test</td>
    </tr>
</tfoot>
</table>
</div>

jsfiddle

两列表格布局

1 个答案: