html - 一种将 TD 置于 TR 中心的方法？

Question

我正在处理 HTML 电子邮件并尝试将绿色 TD 置于白色 TR 的中心，以便在绿色框的左侧和右侧有 20px 的白色边距。

我尝试为绿色部分设置 TD 宽度并设置 margin 0 auto 但绿色只是扩展到 TR 的宽度。

尝试再放入 2 个 TD 以将绿色 TD 推到中心，但也没有用。

包括代码片段在内，我在使用带有 #a6d971 的 TR 时遇到了问题。

<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
    <tbody>
        <tr>
            <td style="margin: 0 auto;">
                <img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
            </td>
        </tr>
        <tr bgcolor="#fff" height="75">
            <td valign="top" style="text-align:center;">
                <p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
                    Regular sales happen every day
                </p>
                <p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
                    9am - 11pm
                </p>
            </td>
        </tr>


        <tr bgcolor="#fff" height="75" padding="10">
            <td bgcolor="#000" width="20"></td>
            <td bgcolor="#a6d971" width="300" style="margin: 10;">
            </td>
            <td bgcolor="#000" width="20"></td>
        </tr>



        <tr bgcolor="#fff">
            <td valign="top">
                <table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
                    <tbody>
                        <tr>
                            <td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
                                <h3>Nine @ Nine</h3>
                                <p>Fuel up! Dresses, tunics and other items including:</p>
                            </td>
                        </tr>




                        <tr>

                        </tr>

                    </tbody>
                </table>
            </td>
        </tr>


        <tr>
            <td style="margin: 0 auto;">
                <img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
            </td>
        </tr>
    </tbody>
</table>

Answer 1

切换到 DIV 和 CSS，大多数电子邮件客户端都很好地支持样式，您可以在 TD 元素中使用 DIV，它会很容易居中或做其他您可能想要的事情。

例如

<tr style="background-color: white;">
  <td  style="background-color: green;">
    <div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
  </td>
</tr>

另请注意，如果您使用 DIV，也可以避免使用表格。