我有以下DataTable(全宽CSS类设置宽度= 100%)
<table class="datatable full-width"> <thead> <th>LOB</th> <th>Creditor Line 1</th> <th>Creditor Line 2</th> <th>Address</th> <th>City</th> <th>State</th> <th>Zip</th> <th></th> </thead> <tbody> ... </tbody> </table>
Javascript:
var profileTable = $(".datatable").dataTable({ "iDisplayLength": 25,"bDestroy": true,"bJQueryUI": true,"sPaginationType": "full_numbers","bAutoWidth": false });
一切工作正常,直到有一个长文本字符串的记录…当一个记录显示真正长的文本,数据表溢出在页面的右侧。 (见下面的屏幕截图,红线是页面应该结束的地方)
http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg
有人可以告诉我如何封装在单元格中的文本或防止此溢出问题?
我试过通过’table-layout:fixed’…这可以防止溢出,但将所有的列设置为相同的宽度。
谢谢
解决方法
我解决了限制(给某些人的好处)我的行只有一行文本高。包含长字符串的CSS变成:
.datatable td { overflow: hidden; /* this is what fixes the expansion */ text-overflow: ellipsis; /* not supported in all browsers,but I accepted the tradeoff */ white-space: nowrap; }
[编辑添加:]使用我自己的代码,最初失败后,我认识到可能有助于人的第二个要求。表本身需要有固定的布局或单元格将只是继续尝试扩展到适应内容无论什么。如果DataTables样式或您自己的样式尚未这样做,则需要设置:
table.soMetableClass { table-layout: fixed }
现在文本被截断为省略号,实际上“看到”潜在隐藏的文本,你可以实现一个工具提示插件或一个细节按钮或东西。但一个快速和肮脏的解决方案是使用JavaScript来设置每个单元格的标题与其内容相同。我使用jQuery,但你不必:
$('.datatable tbody td').each(function(index){ $this = $(this); var titleVal = $this.text(); if (typeof titleVal === "string" && titleVal !== '') { $this.attr('title',titleVal); } });
DataTables还在行和单元格渲染级别提供回调,因此您可以提供逻辑来设置标题,而不是使用jQuery.each迭代器。但是如果你有其他监听器修改单元格的文本,你可能只是更好地打它们与jQuery.each到底。
这整个截断方法也将有一个限制,你已经表明你不喜欢:默认列将有相同的宽度。我识别将持续宽或持续缩窄的列,并明确设置基于百分比的宽度(您可以在您的标记或使用sWidth)。任何没有显式宽度的列都会得到剩余空间的均匀分布。
这可能看起来像很多妥协,但最终的结果是值得的。