javascript - 带有 HTML chop 数据的可调整表

Question

我正在尝试制作一个列大小可调的表格。如果列大小调整得太小，则表格内的数据和标题将被省略号 chop 。

我正在使用来自 http://www.bacubacu.com/colresizable/ 的 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/

我遇到了一些问题:

• 可调整的列大小在 div 中不起作用。我计划有一个很长的表，所以它可以放在允许滚动的溢出 div 中
• chop 不是动态地与表调整一起工作

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

Answer 1

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

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

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

http://jsfiddle.net/ubm4n2ob/4/