HTML电子邮件响应表排列

我正试图让一组表格在手机上显示，就像在桌面上一样

这就是我想做的，但我想不出来：

这是我的密码：

} 桌子{ 边界塌陷：塌陷； } img，一个img{ 边界：0； 高度：自动； 大纲：无； 文字装饰：无； } 车身，车身工作台，车身单元{ 身高：100%； 保证金：0； 填充：0； 宽度：100%； } 展望a{ 填充：0； } img{ -ms插值方式：双三次插值； } 桌子{ mso表空间：0pt； mso表rspace:0pt； } .ReadMsgBody{ 宽度：100%； } .外部类{ 宽度：100%； } p、 a、li、td、blockquote{ mso线高度规则：精确； } a[href^=tel]， a[href^=sms]{ 颜色：继承； 游标：默认值； 文字装饰：无； }p、 a、li、td、正文、表格、区块引用{ -ms文本大小调整：100%； -webkit文本大小调整：100%； }.ExternalClass、.ExternalClass p、.ExternalClass td、.ExternalClass div、.ExternalClass span、.ExternalClass字体{ 线高：100%； } a[x-apple-data-Detector]{ 颜色：继承！重要； 文字装饰：无！重要； 字体大小：继承！重要； 字体家族：继承！重要； 字体大小：继承！重要； 行高：继承！重要； } 体细胞{ 填充：10px； } .模板容器{ 最大宽度：600px！重要； } a、 麦克恩布顿{ 显示：块； } mcnImage先生{ 垂直对齐：底部对齐； } .mcnTextContent{ 断字：断字； } .mcnTextContent img{ 高度：自动！重要； } .mcnDividerBlock{ 表布局：固定！重要； } .英雄头球{ 字体大小：56px； 线高：56px； 字体系列：arial； 颜色：658DA5； 文本阴影：-1px 0 1px白色，-2px-1px 0 dcd388，-2px 1px 4px浅灰色； } @仅介质屏幕，最大宽度：480px{ .英雄头球{ 填充：0 18px； 字体大小：32px； 线高：32px； 文本阴影：无； } } 车身{ 背景色：ffffff； } 体细胞{ 边界顶部：0； } .模板容器{ 边界：0； } 模板预引导器{ 背景色：fafa； 边界顶部：0； 边界底部：0； 填充顶部：9px； 填充底部：9px； } templatePreheader.mcnTextContent，templatePreheader.mcnTextContent{ 颜色：6565； 字体系列：Helvetica； 字体大小：12px； 线高：150%； 文本对齐：左对齐； } templatePreheader.mcnTextContent a，templatePreheader.mcnTextContent p a{ 颜色：6565； 字体大小：正常； 文字装饰：下划线； } 模板头{ 背景色：FFFFFF； 边界顶部：0； 边界底部：0； 填充顶部：9px； 填充底部：0； } templateHeader.mcnTextContent，templateHeader.mcnTextContent{ 颜色：202020； 字体系列：Helvetica； 字体大小：16px； 线高：150%； 文本对齐：左对齐； } templateHeader.mcnTextContent a，templateHeader.mcnTextContent p a{ 颜色：2BAADF； 字体大小：正常； 文字装饰：下划线； } 模板体{ 背景色：FFFFFF； 边界顶部：0； 边界底部：0； 填充顶部：0； 填充底部：0； } templateBody.mcnTextContent，templateBody.mcnTextContent{ 颜色：202020； 字体系列：Helvetica； 字体大小：16px； 线高：150%； 文本对齐：左对齐； } templateBody.mcnTextContent a，templateBody.mcnTextContent p a{ 颜色：2BAADF； 字体大小：正常； 文字装饰：下划线； } templateUpperColumns{ 背景色：FFFFFF； 边界顶部：0； 边界底部：0； 填充顶部：0； 填充底部：0； } templateUpperColumns.columnContainer.mcnTextContent，templateUpperColumns.columnContainer.mcnTextContent{ 颜色：202020； 字体系列：arial； 字体大小：16px； 线高：150%； 文本对齐：左对齐； } templateUpperColumns.columnContainer.mcnTextContent a，templateUpperColumns.columnContainer.mcnTextContent a{ 颜色：2BAADF； 字体大小：正常； 文字装饰：下划线； } templateLowerColumns{ 背景色：FFFFFF； 边界顶部：0； 边框底部：2个实心EAEA； 填充顶部：0； 填充底部：9px； } templateLowerColumns.columnContainer.mcnTextContent，templateLowerColumns.columnContainer.mcnTextContent{ 颜色：202020； 字体系列：arial； 字体大小：16px； 线高：150%； 文本对齐：左对齐； } templateLowerColumns.columnContainer.mcnTextContent a，templateLowerColumns.columnContainer.mcnTextContent p a{ 颜色：2BAADF； 字体大小：正常； 文字装饰：下划线； } 模板页脚{ 背景色：F8； 边界顶部：0； 边界底部：0； 填充顶部：9px； 填充底部：9px； } templateFooter.mcnTextContent，templateFooter.mcnTextContent{ 颜色：6565； 字体系列：Helvetica； 字体大小：12px； 线高：150%； 文本对齐：居中； } templateFooter.mcnTextContent a，templateFooter.mcnTextContent a{ 颜色：6565； 字体大小：正常； 文字装饰：下划线； } @仅介质屏幕和最小宽度：768px{ .模板容器{ 宽度：600px！重要； } } @仅介质屏幕，最大宽度：480px{ 车身、工作台、td、p、a、， 李，区块报价{ -webkit文本大小调整：无！重要； } } @仅介质屏幕，最大宽度：480px{ 身体{ 宽度：100%！重要； 最小宽度：100%！重要； } } @仅介质屏幕，最大宽度：480px{ 体细胞{ 填充顶部：10px！重要； } } @仅介质屏幕，最大宽度：480px{ .包装纸{ 最大宽度：100%！重要； 宽度：100%！重要； } } @仅介质屏幕，最大宽度：480px{ mcnImage先生{ 宽度：100%！重要； } } @仅介质屏幕，最大宽度：480px{ .mcncoptionTopContent、.mcncoptionBottomContent、.mcnTextContentContainer、.mcnBox文本内容容器、.mcnImageGroupContentContainer、.mcncoptionLeftTextContentContainer、.mcncoptionRightTextContentContainer、.mcncoptionLeftContentContainer、.mcnImageCardLeftTextContentContainer、.mcnImageCardRightTextContentC容器{ 最大宽度：100%！重要； 宽度：100%！重要； } } @仅介质屏幕，最大宽度：480px{ .mcnBoxedTextContentContainer{ 最小宽度：100%！重要； } } @仅介质屏幕，最大宽度：480px{ .mcnImageGroupContent{ 填充：9px！重要； } } @仅介质屏幕，最大宽度：480px{ .mcnCoptionLeftContentTouter.mcnTextContent， .mcncoptionRightContentOuter.mcnTextContent{ 填充顶部：9px！重要； } } @仅介质屏幕，最大宽度：480px{ .mcnImageCardTopImageContent， .mcnCoptionBlockInner.mcnCoptionTopContent:last child.mcnTextContent{ 填充顶部：18px！重要； } } @仅介质屏幕，最大宽度：480px{ .mcnImageCardBottomImageContent{ 填充底部：9px！重要； } } @仅介质屏幕，最大宽度：480px{ .mcnImageGroupBlockInner{ 填充顶部：0！重要； 填充底部：0！重要； } } @仅介质屏幕，最大宽度：480px{ .mcnImageGroupBlockOuter{ 填充顶部：9px！重要； 填充底部：9px！重要； } } @仅介质屏幕，最大宽度：480px{ .mcnTextContent， .mcnBoxedTextContentColumn{ 右边填充：18px！重要； 左侧填充：18px！重要； } } @仅介质屏幕，最大宽度：480px{ .mcnImageCardLeftImageContent， .mcnImageCardRightImageContent{ 右边填充：18px！重要； 填充底部：0！重要； 左侧填充：18px！重要； } } @仅介质屏幕，最大宽度：480px{ .mcpreview图像上载程序{ 显示：无！重要； 宽度：100%！重要； } } @仅介质屏幕，最大宽度：480px{ h1{ 字体大小：22px！重要； 线高：125%！重要； } } @仅介质屏幕，最大宽度：480px{ 氢{ 字体大小：20px！重要； 线高：125%！重要； } } @仅介质屏幕，最大宽度：480px{ h3{ 字体大小：18px！重要； 线高：125%！重要； } } @仅介质屏幕，最大宽度：480px{ h4{ 字体大小：16px！重要； 线高：150%！重要； } } @仅介质屏幕，最大宽度：480px{ .mcnBoxedTextContentContainer.mcnTextContent， .mcnBoxedTextContentContainer.mcntextContentP{ 字体大小：14px！重要； 线高：150%！重要； } } @仅介质屏幕，最大宽度：480px{ 模板预引导器{ 显示：块！重要； } } @仅介质屏幕，最大宽度：480px{ templatePreheader.mcnTextContent， templatePreheader.mcnTextContent{ 字体大小：14px！重要； 线高：150%！重要； } } @仅介质屏幕，最大宽度：480px{ templateHeader.mcnTextContent， templateHeader.mcnTextContent{ 字体大小：16px！重要； 线高：150%！重要； } } @仅介质屏幕，最大宽度：480px{ templateBody.mcnTextContent， templateBody.mcntextp内容{ 字体大小：16px！重要； 线高：150%！重要； } } @仅介质屏幕，最大宽度：480px{ templateUpperColumns.columnContainer.mcnTextContent， templateUpperColumns.columnContainer.mcntextp内容{ 字体大小：16px！重要； 线高：150%！重要； } } @仅介质屏幕，最大宽度：480px{ templateLowerColumns.columnContainer.mcnTextContent， templateLowerColumns.columnContainer.mcntextp{ 字体大小：16px！重要； 线高：150%！重要； } } @仅介质屏幕，最大宽度：480px{ templateFooter.mcnTextContent， templateFooter.mcnTextContent{ 字体大小：14px！重要； 线高：150%！重要； } }

---

上面的示例包含混合和响应代码，可使电子邮件从桌面更改为移动。听起来你想把它去掉

删除以下代码：

响应类：从和或标记中删除class=mcnImage的实例，这些实例您不希望在移动设备上是全宽的

Outlook的重影表标记：删除和的实例，包括这两个标记中的内容

---

一旦您删除了使这部分电子邮件响应的代码，即使在小屏幕上，您的布局也应该返回到桌面视图。

我没有时间进行详细分析，但我突然想到的是，您有一堆重影代码来强制Outlook上的桌面行为。如果您想在任何地方强制桌面行为，您需要删除MSO条件代码，并让HTML规则无处不在。