如何在新闻通讯模板中实现等宽且居中的<td>？

邮件模板的表格布局确实得回到“老派”的HTML表格属性玩法，毕竟大部分邮件客户端对现代CSS支持拉胯。针对你的需求，只需要给包含Logo的两个<td>做两个关键调整就能搞定：

解决方案代码 #

<table class="footertable" align="center" bgcolor="#e9eef2" width="900px">
  <tr>
    <td>
      <!-- 给内部表格设置width:100%，让它填满父容器 -->
      <table style="height:100%; width:100%;" align="center">
        <tr>
          <td>
            <p style="font-size:14px;"> Lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
          </td>
        </tr>
        <tr>
          <!-- 1. 给每个td设置width="50%"，实现等宽 -->
          <!-- 2. 加上align="center"，让Logo在单元格内居中 -->
          <td width="50%" align="center">
            <img src="http://gdj.graphicdesignjunction.com/wp-content/uploads/2017/12/best-logos-2017-37.jpg" alt="logo-small.png" width="90px">
          </td>
          <td width="50%" align="center">
            <img src="https://www.prodesigns.com/backend/img/visual-brief/1497000058-alstrom.jpg" alt="noe-logo.png" width="90px">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

关键修改说明 #

• 给内部表格设置width:100%：让它完全填满外层<td>的宽度，确保两个50%宽度的子<td>能准确等分空间。
• 给每个Logo所在的<td>加width="50%"：直接用HTML的width属性（不是CSS），因为邮件客户端对inline CSS的width支持不如原生属性稳定，这样能保证两个单元格严格等宽。
• 给每个<td>加align="center"：让单元格内的图片水平居中，这比用text-align:center的inline style兼容性更好，尤其是老版本的Outlook客户端。

如果需要调整两个Logo之间的间距，还可以给<td>加上padding的inline样式，比如style="padding:0 10px;"，同样是用inline样式保证兼容性。

内容的提问来源于stack exchange，提问作者felixo