我想知道让表格数据在电子邮件中响应的最佳方式是什么？
我使用 Zurb 的 Ink 来制作我的响应式电子邮件，我想将它插入一个表格数据（如购物卡表格）。但我希望它反应灵敏。我的想法是设置 2 个表格，一个用于桌面，另一个用于移动设备，并根据屏幕大小隐藏一个或另一个。 我找到了许多在电子邮件中隐藏某些内容的解决方案。但是没有人处理每一个网络邮件。
你有什么想法吗？
谢谢。
【问题讨论】：
标签： html css mobile html-email email
根据您的 codepen，您有几个选择。
第一个是一个简单的解决方案，类似于您已经拥有的解决方案。第二个更困难和复杂 - 但不需要有 2 个单独的数据表。
1.) 做一个移动桌子和一个桌面桌子。默认情况下显示 Mobile 表格，并使用带有 Max-Width 的百分比来包含 gmail 客户端。然后在您的桌面断点处进行媒体查询（例如，通常在 600 像素左右），将其更改为 display:none !important 等以隐藏桌面上的表格。然后，您默认隐藏桌面版本。在 gmail 中，使用 display:none 不起作用，为了让它工作，你需要使用 display:none !important，这使得内联它几乎没用。请参阅下面的列表，该列表取自 css 上的 here，用于隐藏在 gmail 中。然后，您可以让媒体查询也更改要显示的桌面表，从而有效地替换它。这确实意味着在 gmail Web 客户端上，将显示移动表格。
显示：无；
字体大小：0；
最大高度：0；
行高：0；
填充：0； （可选）
mso-隐藏：全部； /* 在 Outlook 2007-2013 中隐藏元素 */（可选）
2.) 您的第二个选项是构建一堆块表，它们充当每一行，并且 tds 将在移动设备上堆叠，隐藏的 tds 用于在桌面或移动设备上显示的标题等。这可能会变得非常复杂和非常微不足道，因为一个微小的变化可能会破坏整个事情。它可能会让您在所有客户中获得更好的展示效果，但在我看来，第一种选择更加高效和可持续。
【讨论】：
我建议你看看这篇简洁的文章： display table explanation
否则你可以尝试使用 display: flex 属性
【讨论】：