Регулируемая таблица с усеченными данными для HTML

Question

Я пытаюсь создать таблицу с регулируемыми размерами столбцов. Если размер столбца слишком мал, то данные и заголовок внутри таблицы обрезаются с помощью многоточия.

Я использую библиотеку colResizable из http://www.bacubacu.com/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/

I У меня есть проблемы с несколькими вещами:

• Регулируемый размер столбца не работает внутри 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/