如何"智能化"我的HTML/CSS表,使文本适合一行(巧妙地)

Question

我有一个CSS表,可以在我的代码中重复使用.每次使用表时,数据的大小和表的列数都会有所不同.表的最大宽度(由CSS设置)是页面的80%.但是,有时当表有一些数据(可能将表扩展到页面的50%)时,某些文本行将分成两行.如何抵消这一点,因此该表使用了所有可用空间.

这就是目前发生的事情:

我已经尝试设置表的手动宽度,但这意味着即使表宽度只需要很小,表也会保持拉伸状态.

我也尝试过使用CSS white-space:nowrap;但是如果一列中有大量数据,这会使表扩展到80%以上.

无论如何用CSS解决这两个问题？

Answer 1

只需使用此css:

td
{
white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
}?

结果是这样的:http://jsfiddle.net/ongisnade/pghny/