Html 不使用css的td堆叠

我们的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">

或

@导入“/stylesheet.css”；

或

正文{颜色：绿色；}

雪上加霜的是，我应该在上面包括这一点，在将文件保存到他们的in-software HTML编辑器中时，

标记（包括body标记本身）上方的所有内容都会被删除。他们有一些自动代码修改脚本，在他们的样式指南中引用“已批准”的代码，并去掉剩下的代码。那我还剩下什么？一点也不多。基本上从打开

到关闭

之间。他们甚至去掉了

和

对于剩余的代码，我根本无法使用

@media

，也无法允许任何

堆叠。那么，他们是否有其他方式链接到你所知道的样式表。。。一种允许堆叠而不访问CSS的方法？我基本上是在寻找一种方法，使这些电子邮件在上述限制下响应

---

我已将样式指南上载到JSFIDLE:

看起来您的样式指南包含了一些内联样式的使用：

 <p>Our studio is <span style="color:purple">purple.</span></p>
     Define sections of text that require different HTML    <div>   
 <div style="color:#FC8301">
     <h3>This title.</h3>
     <p>This is sentence.</p>
 </div>

我们的工作室是紫色的

定义需要不同HTML的文本部分 这个标题。 这是一句话

既然你是自动生成电子邮件的，为什么不让这一个滑动，在变量中声明你的风格，并在适当的地方使用它们呢

他们是否正在剥离所有样式标签？你能不能在TD的行将阶段隐藏一种风格

<td><style>/*rules are for quitters!*/</style>Stuff</td>

/*规则适用于戒烟者*/东西

是，是100次是。每个设计过电子邮件模板的人都有同样的抱怨。电子邮件设计大约是1999年的网页设计。首先，忘记CSS引用，尽可能地内联所有内容，不要为@media标记操心，忘记它们的存在

表格设计
将

视为电子表格，将

视为表格行，将

视为表格单元格。尝试嵌套表格，而不是“堆叠”TDs。一个新的桌子可以放在一个TD里面，以一种Matryoska玩偶风格的方式，你可以做任何你想要的布局

<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>

1.
2.
3.
4.
5.

以上方法很好

响应性电子邮件
回复和电子邮件这两个词通常不在一起。电子邮件客户端呈现的内容非常有限，但有一些方法可以解决这一问题。例如，将主表的宽度设置为100%，每侧有两个TDs。像这样：

<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>

身体

下面是JSFIDLE中的两个示例

---

在身体中使用样式标签可能不是最好的选择，甚至可能会引起许多web开发人员的呕吐，但它确实如此

我强烈建议不要在您列出的案例之外以这种方式使用它，并建议对所有客户机进行大量测试，因为它有时会导致错误的结果

我希望让您的内联样式能够完成大部分繁重的工作，只需使用body中的样式标记即可完成其他方式无法完成的项目。

下面是一些关于GMAIL应用程序（几乎完全去除了样式标签）上的响应性HTML电子邮件的好资源，应该可以帮助您找到创建电子邮件的最佳方法

混合编码方法-

混合编码重复

---

混合动力车是正确的选择吗？

感谢您的快速回复！发布后不久，我就进去澄清了我的目标（在文章的底部），那就是找出一种方法，允许TD堆叠（或使电子邮件响应的另一种方法），在样式指南中列出的限制下。好的，那么，为什么不手动将您想放在样式表中的css规则放入html中呢？我的想法就像

stuff

<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>

<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>