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

【问题标题】：DataTables: How to have wrapping texts and horizontal scroller bar togetherDataTables：如何将文本和水平滚动条包装在一起
【发布时间】：2018-06-25 08:08:27
【问题描述】：

预期行为

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

环境

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"，下面没有。

问题

为什么设置选项"scrollX": true;后表格没有水平滚动条？
设置class="nowrap"后如何根据文字长度自动改变列宽？

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

【问题讨论】：

标签： javascript css angular html-table datatables-1.10

【解决方案1】：

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

【讨论】：

感谢您的回答，我添加了 display: inline-block;但它仍然与我问题中的第二张照片相同。数据显示为一行。

【解决方案2】：

在数据表中，您可以使用响应式属性，无论您的数据有多长，它都会响应式管理在这里您可以看到更多

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

【讨论】：

调整页面大小并查看效果
感谢您的回答，但实际上我的问题是关于表格设置而不是响应不同尺寸的屏幕。