响应电子邮件中的数据表

Question

我想使电子邮件响应，但我有一些数据表的问题（没有布局表）。这笔交易是2个表：一个用于桌面，另一个用于移动。直到那里，没有问题我可以根据屏幕大小隐藏/显示表格。但是在显示移动桌时我遇到了问题。

看看这个codepen ...

当显示移动表时，我希望第二列具有“自动大小”，以便将文本放在一行上。

你有什么想法 ？我找不到正确的CSS ...

谢谢。

Answer 1

移动布局的第二列需要最小宽度（例如100px）。即

但是，如果有效的话，这个表在今天的电子邮件客户端中不再有用。我使用Litmus和Outlook（任何），Gmail，iPhone测试了它 - 都有严重的错误。

更好的方法是使用一个表 - 更容易进行维护 - 您可以将其保存在old-fashioned datatable manner或use card UI design中，以大幅提高其可读性，灵活性和可访问性。

单个数据表的基本功能是为电子邮件使用混合结构，三列，并在每列中重复标题。然后隐藏桌面的标题（或显示它们用于手机）。

像这样：

阅读链接文章了解完整详情。

卡片UI设计的基本特征是将一行的所有信息收集在一起，并使用层次结构和格式塔法则在多行上显示，以提高可读性。

例如：

Answer 2

如果要将第二列中的文本保留在一行中，请检查以下内容：

Keep a line of text as a single line - wrap the whole line or none at all

要调整此列的宽度，请尝试使用：width: auto。

下次考虑使用响应式Twitter-Bootstrap框架，兄弟。