如何使电子邮件中的 table 数据响应
How to make table data responsive in email
我想知道在电子邮件中使 table 数据响应的最佳方法是什么？
我使用 Zurb 的 Ink 制作响应式电子邮件，我想将其插入 table 数据（例如购物卡 table）。但我希望它有响应。我的想法是设置 2 tables，一个用于桌面，另一个用于移动设备，并根据屏幕大小隐藏一个或另一个。
我发现了很多在电子邮件中隐藏内容的解决方案。但是没有人在每个网络邮件中工作。
你有什么想法吗？
谢谢。
我建议你看看这篇简洁的文章：
display table explanation
否则你可以尝试使用显示器：flex 属性
根据您的代码笔，您有几个选择。
第一个是一个简单的解决方案，类似于您已经拥有的解决方案。第二个要困难和复杂得多 - 但将不再需要 2 个单独的数据 tables.
1.) 做移动 table 和桌面 table。默认显示 Mobile table，并使用百分比和 Max-Width 包含 gmail 客户端。然后在您的桌面断点（例如通常在 600px 左右）处进行媒体查询，将其更改为 display:none !important 等以隐藏桌面上的 table。然后默认隐藏桌面版本。在 gmail 中，使用 display:none 不起作用，为了让它起作用，您需要使用 display:none !important，这使得内联几乎没有用。请参阅下面从 css 上的 here 获取的用于隐藏在 gmail 中的列表。然后您让媒体查询也更改桌面 table 以显示，有效地替换它。这确实意味着在 gmail 网络客户端上，移动 table 将显示。
显示：none；
font-size: 0;
max-height: 0;
line-height: 0;
填充：0； （可选）
mso-hide：全部； /* 在 Outlook 2007-2013 中隐藏元素 */（可选）
2.) 你的第二个选择是构建一堆块 table 作为每一行，tds 将堆叠在移动设备上，隐藏 tds headers 显示在桌面或移动等。这可能会变得非常复杂和脆弱，因为一个微小的变化可能会破坏整个事情。它可能会让您在所有客户中更好地展示，但在我看来，第一个选项更有效、更可持续。
我想知道在电子邮件中使 table 数据响应的最佳方法是什么？
我使用 Zurb 的 Ink 制作响应式电子邮件，我想将其插入 table 数据（例如购物卡 table）。但我希望它有响应。我的想法是设置 2 tables，一个用于桌面，另一个用于移动设备，并根据屏幕大小隐藏一个或另一个。 我发现了很多在电子邮件中隐藏内容的解决方案。但是没有人在每个网络邮件中工作。
你有什么想法吗？
谢谢。
我建议你看看这篇简洁的文章： display table explanation
否则你可以尝试使用显示器：flex 属性
根据您的代码笔，您有几个选择。
第一个是一个简单的解决方案，类似于您已经拥有的解决方案。第二个要困难和复杂得多 - 但将不再需要 2 个单独的数据 tables.
1.) 做移动 table 和桌面 table。默认显示 Mobile table，并使用百分比和 Max-Width 包含 gmail 客户端。然后在您的桌面断点（例如通常在 600px 左右）处进行媒体查询，将其更改为 display:none !important 等以隐藏桌面上的 table。然后默认隐藏桌面版本。在 gmail 中，使用 display:none 不起作用，为了让它起作用，您需要使用 display:none !important，这使得内联几乎没有用。请参阅下面从 css 上的 here 获取的用于隐藏在 gmail 中的列表。然后您让媒体查询也更改桌面 table 以显示，有效地替换它。这确实意味着在 gmail 网络客户端上，移动 table 将显示。
显示：none；
font-size: 0;
max-height: 0;
line-height: 0;
填充：0； （可选）
mso-hide：全部； /* 在 Outlook 2007-2013 中隐藏元素 */（可选）
2.) 你的第二个选择是构建一堆块 table 作为每一行，tds 将堆叠在移动设备上，隐藏 tds headers 显示在桌面或移动等。这可能会变得非常复杂和脆弱，因为一个微小的变化可能会破坏整个事情。它可能会让您在所有客户中更好地展示，但在我看来，第一个选项更有效、更可持续。