如何使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

回答