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

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

这个jsFiddle简化了我的问题，宽度为70％，我使用的任何自定义CSS都覆盖了典型的DataTables.net CSS（除了视觉样式）。

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

HTML：

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; } 

对我div的唯一解决方案是在td设置div并在div上设置max-width / width ，但我不想设置固定宽度，因为我希望它可以从DataTables中找出。 net选项，使用sWidth选项。

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

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; }