gpt4 book ai didi

html - 响应式电子邮件中的数据表

转载 作者:行者123 更新时间:2023-11-28 16:57:06 26 4
gpt4 key购买 nike

我想让电子邮件响应,但我在数据表(没有布局表)方面遇到了一些问题。交易是制作 2 个表:一个用于桌面,另一个用于移动。在那之前,没问题,我可以根据屏幕大小隐藏/显示表格。但是我在显示移动表格时遇到了问题。

看看这个codepen ...

当显示移动表格时,我希望第 2 列有一个“自动调整大小”,以便将文本放在一行上。

你有什么想法吗?我找不到正确的 css ...

谢谢。

最佳答案

移动布局的第二列需要一个最小宽度(例如 100 像素)。IE。 for .table.container table.row.mobile-show td under the @media query

但是,此表在今天的电子邮件客户端中不再有效,如果它曾经有效的话。我已经使用 Litmus 和 Outlook(任何)、Gmail、iPhone 对其进行了测试 - 都存在严重错误。

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

单一数据表的基本特征是对电子邮件使用混合结构,三列,并在每一列中重复标题。然后隐藏桌面的标题(或显示它们的手机)。

像这样:

Three column structure

阅读链接文章以获取完整详细信息。

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

例如:

Card layout of a Service Invoice datatable

关于html - 响应式电子邮件中的数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31908701/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com