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

Posted 2023-05-07

【中文标题】如何使用 DataTables.net 修复破坏容器外部表格的长列值问题？

【英文标题】：How do I fix long column value issue which breaks table outside of container, using DataTables.net?

【发布时间】：2013-11-03 11:03:15

【问题描述】：

当一列的值很长且没有空格时，表格会从任何具有设定宽度（或百分比）的容器中分离出来。目前，我需要一个宽度为 50% 的表格，而 long 值将表格从 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;

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

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

【参考方案1】：

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

table  table-layout: fixed; 

td  
 overflow: hidden;
 text-overflow: ellipsis; 

jsfiddle

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

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

【讨论】：

这仍然会导致表格超过容器宽度的 100%，但更接近。我加入了.dataTables_scroll overflow: hidden; 以尽量减少

另外，虽然这解决了值过长的问题，但具有正常值的表格在容器中被加宽，如果表格中有垂直滚动条，则可以隐藏垂直滚动条