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

Question

我想知道使表数据在电子邮件中响应的最佳方法是什么？

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

你有什么想法吗？

谢谢。

Answer 1

根据您的代码笔，您有几个选择。

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

1.) 做一张移动 table 和一张桌面 table 。默认情况下显示 Mobile 表格，并使用百分比和 Max-Width 来包含 gmail 客户端。然后在您的桌面断点(例如通常在 600 像素左右)处进行媒体查询，将其更改为显示:无!重要等以隐藏桌面上的表格。然后默认隐藏桌面版本。在 gmail 中，使用 display:none 不起作用，为了让它工作你需要使用 display:none !important，这使得内联它几乎没有用。请参阅下面的列表，摘自 here在 css 上用于隐藏在 gmail 中。然后，您让媒体查询也更改要显示的桌面表，从而有效地替换它。这确实意味着在 gmail 网络客户端上，将显示移动表格。

显示:无；

字体大小:0；

最大高度:0；

行高:0；

填充:0； (可选)

mso-隐藏:全部；/* 在 Outlook 2007-2013 中隐藏元素 */(可选)

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