表格单元格中的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/