显示/格式化表格数据（网络）答案

【问题标题】：Displaying/Formatting Tabular Data (web)显示/格式化表格数据（网络）
【发布时间】：2016-09-25 02:51:32
【问题描述】：

在我的示例中，我有一个表格，其中每一行都是一个用户。列可以包括他们的姓名、地址、电子邮件地址等。我现在需要为（假设的例子）他们的猫的名字添加一列。虽然大多数人没有猫，有些人会有 1-2 只猫，但偶尔会有 20 只猫的人在桌子上形成一个很长的行。这给了我一个演示和过滤/搜索猫名的问题。显示此类数据有没有好的解决方案？

【问题讨论】：

标签： html-table

【解决方案1】：

让该字段的前 50 个（或其他）字符正常显示，然后将其余字符放在一个块中，并通过 CSS 将其可见性设置为隐藏。包括一个链接/按钮/图标，允许用户切换可见性，以便他们可以看到整个值。

【讨论】：

【解决方案2】：

几个选项：

设置单元格的最大宽度并允许数据换行
将内容放在包装标签（如 div）内，并将 div 设置为固定宽度/高度和溢出样式：隐藏，以确保特别长的单词不会强行超出单元格的宽度。
截断服务器端的输出文本

对于情况#2 和#3，设置TD 标记的Title 属性以包含完整的非截断文本。将鼠标悬停在单元格上时，这将显示为工具提示。

我会提到其他基于 CSS 的解决方案，但它们目前支持的很少，所以不值得一提。

【讨论】：

【解决方案3】：

您可能想尝试做类似 SO 所做的事情。也就是说，一旦有人在他们的 Rep 中达到某个点，它就会为数字加上后缀并对其进行近似。前任。 10k 而不是 10,236。

这样数字就不会失控。

【讨论】：