Outlook中HTML表格100%宽度显示异常问题求助

嘿，这个坑我踩过好多次了！Outlook的邮件渲染引擎是基于Word的老代码，对现代CSS的支持特别拉胯，尤其是inline的width:100%经常被它忽略。别担心，给你几个靠谱的解决方案：

1. 双保险：同时使用HTML原生width属性+inline CSS #

Outlook更信任HTML元素的原生属性，而不是CSS样式。所以给你的表格同时加上原生的width="100%"和inline的style="width:100%;"，这样既能兼容Outlook，又能在其他浏览器/邮件客户端正常工作：

<table width="100%" style="width: 100%;" frame="box">
  <!-- 你的表格内容 -->
</table>

2. 检查父容器的宽度设置 #

如果上面的方法还没生效，大概率是表格的父容器（比如包裹它的<td>或<div>）限制了宽度。Outlook会继承父元素的宽度，所以你需要给父容器也加上同样的双保险设置：

<!-- 比如表格在一个<td>里 -->
<td width="100%" style="width: 100%; padding: 0; margin: 0;">
  <table width="100%" style="width: 100%;" frame="box">
    <!-- 你的表格内容 -->
  </table>
</td>

注意要去掉父容器的padding和margin，避免额外的宽度挤压。

3. 避开Outlook不支持的CSS属性 #

别在表格或父元素上用max-width、min-width这类属性，Outlook完全不买账。另外，尽量不要用外部CSS样式表——邮件里所有样式最好都写成inline的，Outlook几乎不支持外部样式。

亲测这几个方法能解决99%的Outlook表格宽度问题，尤其是老版本的Outlook 2013/2016这类顽固分子。

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