我们的 CRM 允许我们使用客户的软件向他们发送自动电子邮件。购买收据之类的东西。虽然他们提供电子邮件的 HTML 编辑，但它受到严格限制，我们可能不会使用任何 CSS。
就他们的样式指南所允许的而言，它似乎全是 HTML 和一些内联样式，例如:
<span style="color:#ffffff">white</span>
<div style="color:#ffffff">
<img src="dickbutt.gif" style="width:30px;height:20px">
...根据指南，一切正常。但是，不允许使用其他 CSS 或 CSS 引用，包括:
<link rel="stylesheet" href="/stylesheet.css" type="text/css">
或
<style type="text/css">
@import "/stylesheet.css";
</style>
或
<style type="text/css">
body { color:green; }
</style>
雪上加霜，我应该把这个包括在上面，<body> 上面的所有内容在将文件保存在软件内的 HTML 编辑器中时，标签(包括 body 标签本身)会被删除。他们有某种自动代码修改脚本，在他们的风格指南中引用“已批准”的代码，并删除剩下的代码。那我还剩下什么？一点也不多。基本上从开间<table>到收盘</table> .他们甚至去掉了 </body>和 </html> .
使用剩余的代码，我无法使用 @media完全或允许任何<td>堆叠。那么，他们是否有其他链接到您所知道的样式表的方法？ ...一种无需访问 CSS 即可允许堆叠的方法？我基本上是在寻找一种方法，使这些电子邮件在上述限制下具有响应性。
我将样式指南上传到 JSfiddle:https://jsfiddle.net/Lxfqus7f
最佳答案
是的，是的 100 次是的。每个曾经设计过电子邮件模板的人都有过同样的提示。电子邮件设计是 1999 年左右的网页设计。首先，忘记 CSS 引用，只是内联所有你能做的，不要理会 @media 标签，甚至忘记它们的存在。
表格设计
想想一个 <table> 作为电子表格， <tr> 作为表格行， <td> 作为表格单元格。与其“堆叠”TD，不如尝试嵌套表格。一张新 table 可以放入 TD 中，您可以按照某种俄罗斯套娃风格的方式进行任何布局。
<table>
<tr>
<td>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>5</td>
</tr>
</table>
以上工作正常。
回复邮件
responsive 和 email 这两个词通常不会放在一起。电子邮件客户端呈现的内容受到严重限制，但有一些方法可以解决它。就像将主表的宽度设置为 100% 并且每侧有两个 TD。像这样:
<table width="100%" cellspacing="0" cellpadding="0">
<tr height="500px" valign="top">
<td width="*" bgcolor="#00FFFF"> </td>
<td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td>
<td width="*" bgcolor="#00FFFF"> </td>
</tr>
</table>
这是 JSfiddle 中的两个示例。
关于html - 不使用 css 的 td 堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32592412/