相关疑难解决方法(0)

我有以下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'...这可以防止溢出但是将所有列设置为相同的宽度.

谢谢

当一列具有长值而没有空格时,该表会突破具有设置宽度(或百分比)的任何容器.目前,我需要一个宽度为50%的表格,而长值会将表格从50%宽度的容器中分离出来.

这个jsFiddle简化了我的问题,宽度为70%,我使用的任何自定义CSS都覆盖了典型的DataTables.net CSS(除了视觉样式).

http://jsfiddle.net/mswieboda/8qVh4/

HTML:

<div class="container">
  <table class="grid"></table>
</div>

CSS:

.dataTable {
  width: 100% !important;
  margin: 0;
}
.dataTables_wrapper {
  position: relative;
}
.dataTables_scrollHeadInner {
  width: 100% !important;
}
.container {
  position: relative;
  width: 70%;
  border: 1px solid #f0f;
}
.container .grid {
  position: relative;
  overflow-x: hidden;
}

注意:我意识到我不应该使用 !important,但这是另一天的问题.

请参阅jsFiddle以了解我正在使用的特定JS和DataTables.net选项.

我想用CSS删除/截断长椭圆值.我可能需要这样的东西:

.dataTable tbody td {
  text-overflow: ellipsis;
  overflow: hidden;
}

对我有用的唯一解决方案是在a div中td设置a max-width/ widthon div,但我不想设置固定宽度,因为我希望使用该sWidth选项从DataTables.net选项中找出它.

我做了一些研究,但还没有提出任何可靠的解决方案.有人有解决方案吗？