我正在尝试制作一个列大小可调的表格。如果列大小调整得太小,则表格内的数据和标题将被省略号 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 不是动态地与表调整一起工作
如有任何帮助,我们将不胜感激。
最佳答案
我建议您按照插件页面上的演示逐步操作。您的 html 代码看起来与演示有点不同。 无论如何,检查这个 fiddle ,它应该做你想做的。可能,通过为单元格和内部 div 设置相同的宽度,您导致了一些边框重叠,导致插件无法让您调整列的大小
我试图从插件的参数列表中删除 fixed: false,
,我编辑了你的 html 并添加了一个 CSS 规则,现在它可以工作了
$("#expand-table").colResizable({
liveDrag: true,
gripInnerHtml: "<div class='grip2'></div>",
draggingClass: "dragging"
});
关于javascript - 带有 HTML chop 数据的可调整表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36064773/