响应电子邮件中的数据表

Question

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

查看此codepen ...

当显示移动表格时，我希望第二列有一个＆＃34;自动大小＆＃34;为了让文字在一行上。

你有什么想法吗？我无法找到正确的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框架，兄弟。