2

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

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

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

4

1 回答 1

6

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

table { table-layout: fixed; }

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

jsfiddle

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

table { table-layout: fixed; }
td { word-wrap:break-word; }
于 2013-10-24T23:04:28.477 回答