预期的行为
我有一个网页,其中包含一个包含许多列的表。对于每个表格单元格,它可以是短文本或非常长的文本。所以我想要一个水平滚动条来显示所有类型的文本,无论它是长还是短。
环境
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"
CSS添加到您的表中。
在datatable中,您可以使用响应属性,无论您的数据有多长,它都会响应地管理,您可以在此处看到更多信息
display: inline-block;