如何使用内联样式居中表格行（tr元素）？

问题背景 #

需修复邮件模板，让嵌套在父表格中的表格行（tr）居中显示；因后端EmailBuilder会破坏非内联样式，仅能使用内联样式实现；已尝试给嵌套表格添加style="margin-left: auto; margin-right: auto;"但无效，目标是让整行内容居中在屏幕中间。

核心问题分析 #

原嵌套表格设置了width="100%"，导致表格占满父容器宽度，margin:auto无法生效；同时部分邮件客户端（如Outlook）对块级居中支持有限，需结合父元素的文本对齐属性配合实现。

解决方案步骤 #

• 移除嵌套表格的width="100%"属性，让表格宽度自适应内容，或根据需求设置固定宽度
• 给父级<td>添加内联样式text-align: center;，适配邮件客户端的居中渲染逻辑
• 保留嵌套表格的margin-left: auto; margin-right: auto;样式，作为现代邮件客户端的兼容补充

修改后的代码 #

<tr>
  <td class="ns l-gray plr-5 pb-30" style="padding:0px 0 20px 8px; border-bottom:2px solid #e5e5e5; text-align: center;">
    <table style="margin-left: auto; margin-right: auto;" cellpadding="0" cellspacing="10">
      <tbody>
        <tr>
          <th align="left" class="flex" style="font:400 12px/22px Arial, Helvetica, sans-serif, Ubuntu; color:#b7b7b7; vertical-align:bottom;" width="170">Test Street 5<br /> 81667 Test<br /> Test
          </th>
          <th class="flex" height="10" width="5">&nbsp;</th>
          <th align="left" class="flex" style="font:400 12px/22px Arial, Helvetica, sans-serif, Ubuntu; color:#b7b7b7; vertical-align:bottom;" width="200">Tel: <a href="tel:1234567890" style="color:#b7b7b7; text-decoration:none;">1234567890
                            22</a><br /> Fax: 1234567890<br /> E-Mail: <a href="mailto:test@test.test" style="color:#b7b7b7; text-decoration:none;">Test@Mail.de</a>
          </th>
          <th class="flex" height="10" width="40">&nbsp;</th>
          <th align="left" class="flex" style="font:400 12px/22px Arial, Helvetica, sans-serif, Ubuntu; color:#b7b7b7; vertical-align:bottom;">
            Test Location: Test<br /> CEO: Test Test
            <br /> USt-ID: Test 123459</th>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

补充说明 #

若需要固定宽度的嵌套表格，可直接给嵌套表格添加width="600"（示例宽度）的属性或style="width:600px;"内联样式，确保在不同邮件客户端中显示一致。

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