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

Question

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

http://jsfiddle.net/Fm5bM/

在示例中，省略号在div中工作正常但在单元格中不工作。它仍在增长并忽略width:60%和max-width:60%。

如果我向单元格添加display:block，文本会停止在60％并获得省略号，但单元格的总宽度仍然是整个文本的大小。

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

最终，我希望桌子适合屏幕。有没有办法用纯CSS进行呢？

Answer 1

这可以通过使用table-layout: fixed轻松完成，但“有点棘手”因为没有多少人知道这个CSS属性。

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

请点击此处更新的小提琴：http://jsfiddle.net/Fm5bM/4/