可调整 Table 并为 HTML 截断数据

Question

我正在尝试制作一个 table 具有 adjustable 列大小的文件。如果列大小调整得太小，则 table 内的数据和 header 会被省略号截断。

的 colResizable 库

$("#expand-table").colResizable({
  fixed: false,
  liveDrag: true,
  gripInnerHtml: "<div class='grip2'></div>",
  draggingClass: "dragging"
});

我的css：

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
}

这是我迄今为止一直在尝试的 JSFiddle：http://jsfiddle.net/ubm4n2ob/2/

我遇到了一些问题：

如有任何帮助，我们将不胜感激。

Answer 1

我建议您按照插件页面上的演示逐步操作。您 html 代码看起来与演示有点不同。无论如何，检查这个 fiddle，它应该做你想做的。可能，通过为单元格和内部 div 设置相同的宽度，您导致了一些边框重叠，导致插件无法让您调整列的大小

我试图从插件的参数列表中删除 fixed: false,，我编辑了您的 html 并添加了一个 CSS 规则，现在可以使用了

$("#expand-table").colResizable({
  liveDrag: true,
  gripInnerHtml: "<div class='grip2'></div>",
  draggingClass: "dragging"
});

Adjustable Table with Truncating Data for HTML