Question

我有一个表，这个表从服务器获取数据，并且有几个字段，来自服务器的数据是纯文本，但没有限制字符数。

表格不应超过900px宽。

正如你在我的plunker中看到的，一些文本变得很长，所以它们需要几行，而有些则适合第一行。在我看来，这根本不可读，它是可怕的。

这是真正的问题，因为这应该打印一段时间，所有文字都必须可见。我曾尝试使用一些fixed tables和overflow: hidden属性，尽管这确实使得表格更具吸引力，但很多文本都会显得难以理解

基本上我要问的是，是否有任何尝试过的方法可以在表格中显示（也许）一些文本，并使其具有可读性？

编辑：Okey，因为它似乎是这样做的方式，可以有一些stylig，但没什么大不了的。但是，有一件事困扰着我，那就是标题字段（field1）被推到左边那么多。

我知道我可以设置width，但这要求表格为fixed，这会导致问题，我需要表格尽可能动态。

是否可以设置表格首先打破单词的哪些单元格？因此，字段1和5可能具有较低的优先级，因此这些单元格不太可能有换行符？

Answer 1

理想的解决方案，以及我在大多数项目中使用的解决方案是添加模态。

例如，如果你有一个文本的标记，最好用它来显示几个单词，然后添加一个查看更多按钮，这将打开一个模式，它将显示整个段落。

您还可以尝试在另一列的每一行末尾添加查看按钮。单击此按钮将打开一个模式，该模式完全显示该行中的所有数据。

通过这种方式，您可以在表中显示一些信息而不会使其变得难看，并且还提供表中的所有详细信息（尽管它不在表视图中）。

Answer 2

我看起来也很好，虽然你可以尝试交替行颜色...将以下规则添加到你的CSS ...你当然可以将颜色改变为你喜欢的颜色。我发现它提高了可读性：

tbody tr:nth-child(odd) {
  background: #eee;
}