2

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

GMail 收件箱表

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

左侧列也是固定宽度，并且始终显示电子邮件发件人姓名，无论您压缩视图多少。

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

4

2 回答 2

8

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

overflow:hidden;
white-space:nowrap;

在您希望灵活的单元格上。我制作了一个工作示例（调整面板大小以查看它的实际效果）

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

于 2013-04-28T15:13:53.380 回答
1

如果您显示的不是真正的表格数据，您可能更愿意尝试基于 div 的方法，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.outer {
  display: table; 
  table-layout: fixed; 
  width: 100%;
}

.outer div {
  display: table-cell; 
  padding: 5px;
}

.outer :first-child, .outer :last-child {
  width: 100px; 
  background: #f7f7f7;
}

.outer :last-child {
  padding-left: 30px;
}

.middle {
  white-space: nowrap;
  overflow: hidden;
}
</style>

</head>
<body>

<div class="outer">
  <div>First cell</div> 
  <div class="middle">Second cell second cell second cell second cell second cell second cell second cell second cell second cell second cell second cell second cell second cell </div> 
  <div>Third cell</div>
</div>

</body>
</html>

希望这很简单，不需要太多解释，但关键之一是table-layout: fixed;

于 2013-04-28T15:33:00.100 回答