如何使表格数据在电子邮件中响应

Question

我想知道在电子邮件中制作表格数据的最佳方式是什么？

我使用Zurb的Ink制作我的响应式电子邮件，我想插入一个表数据（如购物卡表）。但我希望它有所回应。我的想法是设置2个表，一个用于桌面，另一个用于移动，并根据屏幕的大小隐藏其中一个或另一个。 我找到了许多隐藏在电子邮件中的解决方案。但是没有人在每个网络邮件中工作。

你有什么想法吗？

感谢。

Answer 1

我建议你看一下这篇简洁的文章： display table explanation

否则，您可以尝试使用display：flex property

Answer 2

根据您的codepen，您有几个选择。

第一个是一个简单的解决方案，类似于你已经拥有的解决方案。第二个是更加困难和复杂 - 但不需要有2个单独的数据表。

1。）做移动桌和桌面桌。默认情况下显示Mobile表，并使用Max-Width的百分比包含gmail客户端。然后在桌面断点处（例如通常大约600px）进行媒体查询，将其更改为显示：none！important等，以隐藏桌面上的表格。然后，您默认隐藏桌面版本。在gmail中，使用display：none不起作用，为了让它工作，你需要使用display：none！important，这使得内联它几乎没用。请参阅以下从css上的here获取的列表，用于隐藏在Gmail中。然后，您将媒体查询也更改为要显示的桌面表，从而有效地替换它。这确实意味着在gmail Web客户端上，移动表将显示。

display：none;

font-size：0;

max-height：0;

行高：0;

填充：0; （可选）

隐藏：全部; / *隐藏Outlook 2007-2013中的元素* /（可选）

2。）你的第二个选择是构建一堆作为每一行的块表，tds将堆叠在移动设备上，隐藏的tds用于显示在桌面或移动设备上的标题等。这可能变得非常复杂和非常微小的变化可以打破整个事物。它可能会让你更好地展示所有客户，但在我看来，第一个选择是更有效和可持续。