如何修复使用DataTables.net打破容器外部的长列值问题？

Question

当一列具有长值而没有空格时,该表会突破具有设置宽度(或百分比)的任何容器.目前,我需要一个宽度为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选项中找出它.

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

Answer 1

添加此CSS.必须在呈现表之前应用CSS.

table { table-layout: fixed; }

td { 
 overflow: hidden;
 text-overflow: ellipsis; 
}

的jsfiddle

如果你真的不需要显示省略号,你可以强制在td内部换行.

table { table-layout: fixed; }
td { word-wrap:break-word; }