css - 有人可以解释 CSS 和标记来制作类似 GMail 邮件 View 的表格吗？

Question

我正在尝试使表格的行为类似于 GMail 用来显示收件箱内容的表格:

即我想要复制的行为是右侧的日期列 - 它滑过包含主题行和消息开头的中间列的顶部。右边的列也是固定宽度的。

左侧的列也是固定宽度的，并且始终显示电子邮件发件人姓名，无论您将 View 压缩到何种程度。

我已经尝试了一段时间，但我觉得这可能会使用一些我不熟悉的 CSS 表格魔法。我希望了解实现这一点的方式和原因，而不仅仅是盲目地从 GMail 复制代码。

Answer 1

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

overflow:hidden;
white-space:nowrap;

在您想要灵活的单元格上。我制作了一个工作示例(调整面板大小以查看实际效果)

http://jsfiddle.net/JNGyL/1/