如何使HTML表格的內容適合其單元格？

我有一個HTML表格，其內容有時不適合其各自單元格的指定大小。在所有瀏覽器中，默認行爲是使單元格縱向或橫向展開以適應其內容。相反，我想視覺修剪的內容，以適應他們的細胞是這樣的：如何使HTML表格的內容適合其單元格？

Text trimming example

我使用 a jQuery plugin，它允許用戶通過任何字段的表進行排序

。出於這個原因，非常重要的一點是，實際的內容不會被修剪，只是顯示爲已被修剪。

我該如何使用標準技術（CSS和JavaScript）來做到這一點？

2011-06-15 pyon

如果你正在獲得水平滾動，你可能想要進一步減小寬度或增加該單元的高度... – Kenneth 2011-06-15 16:33:40

@Kenneth：對不起，我說錯了。我的表格*有一個水平卷軸（我是這樣設計的），但是當我使用'table-layout：fixed'時它會被移除。 – pyon 2011-06-15 16:37:02

您如何爲您的表顯示jsFiddle示例？ – vol7ron 2011-06-15 16:44:17

有一個名爲text-overflow的css屬性來完成此操作。

如果您將其與white-space: nowrap結合使用，您可以實現您正在嘗試執行的操作。

這裏有一個的jsfiddle演示：http://jsfiddle.net/u7QuA/

我不得不包裹TD的內容跨度因爲CSS屬性不會對TD出於某種原因。

2011-06-15 17:02:10 jessegavin

是的，將「td」的內容包裹在「span」內後，它的功能就像一個魅力！謝謝！ – pyon 2011-06-16 03:41:01

您可以爲所有單元格設置寬度並限制必須顯示的JavaScript中特定數量的字符。例如，如果使用substring(0, 15)將超過15個字符的字符串的JavaScript條件放入並在字符串的末尾處添加「...」。

我不知道這是否是最好的解決方案，但它應該工作。

2011-06-15 16:39:39 kschaeffler

我的表具有可排序的列，並且您提出的解決方案混亂排序。 – pyon 2011-06-15 16:54:42

回答