移动端浏览器访问Gmail时HTML邮件max-width失效问题

核心问题分析 #

Gmail网页版会给邮件内的表格添加默认样式（比如table-layout: auto），导致表格被内容撑开；同时部分浏览器对表格上max-width的解析存在差异，再加上原代码里的空<td>会干扰布局计算，最终出现列宽超出屏幕的情况。

解决方案步骤 #

1. 强制表格固定布局
   给表格添加table-layout: fixed属性，让表格严格按照设定的宽度分配列宽，不会被内容撑开，同时保留width: 600px; max-width: 100%的基础样式。

2. 优化空单元格样式
   给空<td>设置width: 1px; white-space: nowrap;，避免空单元格占用不必要的宽度，确保中间列是主要宽度载体。

3. 调整媒体查询的针对性
   使用表格ID作为选择器提升样式优先级，确保媒体查询能覆盖Gmail的默认样式，同时补充width: 100%强化响应式效果。

4. 强化图片的响应式约束
   给图片添加display: block;，消除图片底部的空白间隙，确保max-width: 100%能正确生效。

修改后的完整代码 #

<table style="width:600px; max-width:100%; table-layout: fixed;" id="my-table">
    <tbody>
        <tr>
            <td style="width: 1px; white-space: nowrap;"></td>
            <td><img style="width:600px; max-width:100%; display: block;" src="你的图片URL"></td>
            <td style="width: 1px; white-space: nowrap;"></td>
        </tr>
    </tbody>
</table>

<style>                              
@media screen and (max-width: 500px) {
    #my-table {
        max-width: 350px !important;
        width: 100% !important;
    }
    #my-table img {
        width: 100% !important;
    }
}
</style>

补充说明 #

• table-layout: fixed是解决问题的关键，它让表格宽度由<table>标签的设定值决定，而非内容宽度，有效避免内容撑开表格。
• Gmail网页版会过滤部分外部样式，但内联样式和邮件<head>区域的媒体查询通常能正常生效，确保样式代码放在邮件头部。
• 空单元格的样式调整能消除它们对整体布局的干扰，让中间列的宽度计算更准确。

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