如何在响应式电子邮件中使表格堆叠，从右到左？

Question

这是我的第二封响应式设计电子邮件，但我遇到了困难。

我有2个表格，希望在移动设备上堆叠显示。以下是这2个表格在桌面模式下的外观：

|  1  |  2  |

当在移动设备上查看时，我希望表格显示如下：

|  2  |
|  1  |

我尝试过使用浮动表格和 position:fixed !important，但是无法达到期望的效果。希望得到帮助和指导。

- yonderb

---

position: fixed与float无关。 - Mike Christensen

那么问题是什么？你不知道如何让两个表并排显示，还是不知道如何让它们堆叠在一起（这是表格的默认行为）？ - cimmanon

抱歉造成困惑。我试图让在移动设备上查看时，表格2浮动在表格1之上。每当我的电子邮件进入移动模式时，表格1就会在顶部。我尝试使用“position:fixed”强制表格2到顶部，希望它能强制它从顶部开始，但它只是坐在表格1的上面（基本上隐藏了它）。感谢Brett提供的解决方案。 - yonderb

Answer 1

我尝试了一种方法在另一个解决方案中实现这个功能。

你可以使用dir="rtl"来控制列的堆叠方式。以下是一个示例：

<table class="deviceWidth" dir="rtl"  width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" dir="ltr" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
      <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
      </p>                  
    </td>
    <td width="50%" dir="ltr" align="left" class="full">
      <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                      
    </td>
  </tr>
</table>

结合以下@media查询：

@media only screen and (max-width: 640px)  {


  .full {
    display:block;
    width:100%;
  }
}

这是完整的jsFiddle链接。

- Brett DeWoody

---

这个运行得非常好。非常感谢你，Brett！ - yonderb

我在Outlook 2016中尝试了这个，但是Outlook桌面版会剥离任何子<table>和<td>上的dir="ltr"，将dir="rtl"复制到子表格中，并在叶文本(<p>,<span>)节点上添加dir="ltr"。有人之前在Outlook中尝试过某种嵌套表格设置吗？ - Daniel Cheung

Answer 2

您可以将它们向右浮动，并以相反的顺序声明它们。

// HTML
<table><tr><td> 2 </td></tr></table>
<table><tr><td> 1 </td></tr></table>

// CSS
table {
    float: right; 
}

jsfiddle示例（调整示例窗口大小）

- ippi