DataTables：如何将包装文本和水平滚动条放在一起

Posted 2021-05-04

预期的行为

我有一个网页，其中包含一个包含许多列的表。对于每个表格单元格，它可以是短文本或非常长的文本。所以我想要一个水平滚动条来显示所有类型的文本，无论它是长还是短。

环境

Angular 5（https://angular.io）和DataTables（https://datatables.net），它是用于开发的jQuery javascript库的插件。

第一次尝试

我使用水平滚动条来显示很多列。正如DataTables官方文档中提到的那样（https://datatables.net/examples/basic_init/scroll_x.html），我用选项"scrollX": true;初始化了我的表，但我发现表没有水平滚动条。

第二次尝试

设置选项"scrollX": true;后，我将class="nowrap"添加到我的表中，出现了水平滚动条，但是长文本无法很好地显示。

DEMO LINK您可以通过此网页查看它，它有两个表格，其选项是"scrollX": true;，上面有class="nowrap"，下面没有。

题

1. 为什么表设置选项qazxsw poi后没有水平滚动条？
2. 在设置"scrollX": true;后，列的宽度如何根据文本的长度自动更改？

此外，欢迎任何其他解决方案或想法。

答案

您可以尝试将class="nowrap" CSS添加到您的表中。

另一答案

在datatable中，您可以使用响应属性，无论您的数据有多长，它都会响应地管理，您可以在此处看到更多信息

display: inline-block;