数据表：如何将文本和水平滚动条包装在一起

Question

预期的行为

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

环境

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. 为什么在设置选项"scrollX": true;之后，表格没有水平滚动条？
2. 设置class="nowrap"后，列宽如何根据文本的长度自动更改？

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

Answer 1

您可以尝试将display: inline-block; CSS添加到表中。

Answer 2

在数据表中，无论数据将以多长时间进行响应管理，您都可以使用响应属性，在这里您可以查看更多信息

https://editor.datatables.net/examples/extensions/responsive.html