有人可以解释CSS和Markup来制作像GMail的邮件视图这样的表吗？

Question

我正在尝试制作一个像GMail用来显示收件箱内容的表格:

GMail收件箱表

即我想要复制的行为是右手Date列 - 它滑过中间列的顶部,其中包含主题行和消息的开头.右侧列也具有固定宽度.

左侧列也是固定宽度,无论您压缩视图多少,始终显示电子邮件发件人名称.

我已经尝试了一段时间,但我觉得这可能会使用一些我不熟悉的CSS Table魔术.我想了解实现这个的方式和原因,而不仅仅是盲目地从GMail复制代码.

Answer 1

这里的关键是使用table-layout:fixed;父表元素和

overflow:hidden;
white-space:nowrap;

在您想要灵活的单元格上.我已经制作了一个工作示例(调整面板大小以查看它的运行情况)