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

I have a table where the cells' width is in percentage and I want to use text-overflow: ellipsis to hide long lines of text:

我有一个表格，其中单元格的宽度是百分比，我想使用文本溢出：省略号来隐藏长行文本：

http://jsfiddle.net/Fm5bM/

In the example the ellipsis works fine in a div but not in the cell. It still grows and ignores both width:60% and max-width:60%.

在示例中，省略号在div中工作正常，但在单元格中不工作。它仍然增长并忽略宽度：60％和最大宽度：60％。

If I add a display:block to the cell, the text does stop at 60% and gets the ellipsis, but the total width of the cell is still the size of the whole text.

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

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

Ultimately, I want the table to fit the screen. Is there a way to do it with pure css?

最终，我希望桌子适合屏幕。有没有办法用纯css做到这一点？

1 个解决方案

#1

This is easily done by using table-layout: fixed, but "a little tricky" because not many people know about this CSS property.

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

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

See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/

在这里更新的小提琴中查看它：http：//jsfiddle.net/Fm5bM/4/

#1