我想让电子邮件响应,但我的数据表有一些问题(没有布局表)。这笔交易是2个表:一个用于桌面,另一个用于移动。直到那里,没有问题我可以根据屏幕大小隐藏/显示表格。但是在显示移动桌时我遇到了问题。
查看此codepen ...
当显示移动表格时,我希望第二列有一个"自动大小"为了让文字在一行上。
你有什么想法吗?我无法找到正确的CSS ...
感谢。
答案 0 :(得分:1)
但是,此表在今天的电子邮件客户端中不再起作用(如果有的话)。我已经使用Litmus和Outlook(任何),Gmail,iPhone对它们进行了测试-都有严重的故障。
更好的方法是使用一个表-也更易于维护-您可以将其保留在old-fashioned datatable manner或use card UI design中,以大幅度改善其可读性,灵活性和可访问性。
单个数据表的基本功能是对电子邮件使用混合结构(三列),并在每一列中重复标题。然后隐藏台式机标题(或为手机显示标题)。
像这样:
阅读链接文章以获取全部详细信息。
卡片UI设计的基本功能是使用层次结构和格式法则来提高可读性,从而将一行的所有信息收集在一起,并显示在多行上。
例如:
答案 1 :(得分:0)
如果您想将第二列中的文字保留在一行中,请查看:
Keep a line of text as a single line - wrap the whole line or none at all
要调整此列的宽度,请尝试使用:width: auto
。
下次考虑使用响应式Twitter-Bootstrap框架,兄弟。