CSS百分比宽度和文本溢出在表格单元格中

Question

我有一个表格，其中单元格的宽度以百分比表示，我想使用text-overflow: ellipsis隐藏长文本行：

http://jsfiddle.net/Fm5bM/

在这个例子中，在

标签下用省略号是可以正常工作的，但是在单元格中却不行。 它仍然增长并忽略了width:60%和max-width:60%。

如果我将display:block添加到单元格中，文本确实在60％处停止并出现省略号，但单元格的总宽度仍为整个文本的大小。

http://jsfiddle.net/Fm5bM/3/

最终，我希望表格适合屏幕。 有没有纯CSS的方法可以做到？

- solarc

Answer 1

使用 table-layout: fixed 很容易做到，但是因为不是很多人知道这个CSS属性，所以有点棘手。

table {
  width: 100%;
  table-layout: fixed;
}

在这里更新的 fiddle 中可以看到它的实际效果：http://jsfiddle.net/Fm5bM/4/

- gustavohenke

---

非常感谢！简直不敢相信这么简单。 - solarc

非常感谢，直到看到这个答案我才得以解决问题。 - shell

这适用于width，但不适用于max-width。 :( - new name