带有截断数据的HTML可调整表格

Question

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

我正在使用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内
• 截断不能动态处理表格调整

任何帮助将不胜感激。

Answer 1

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

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

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

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