CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-tables
JoeFromAccounting
JoeFromAccounting

Reputation: 145

Adjustable Table with Truncating Data for HTML

I'm trying to make a table that has adjustable column sizes. If the column size is adjusted too small, then the data and header inside the table becomes truncated with ellipsis.

I'm using the colResizable library from http://www.bacubacu.com/colresizable/

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

My css: 

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

Here is a JSFiddle of what I've been trying so far: http://jsfiddle.net/ubm4n2ob/2/

I'm having trouble with a few things:

Any help would be appreciated.

Upvotes: 1

Views: 285

Answers (1)

Yuri
Yuri

Reputation: 3284

I suggest you to follow step-by-step the demos on the plugin page. You html code looks a bit different from demos. Anyway, check this fiddle, it should do what you want. Probably, by setting the same width to both the cell and the inner div, you were causing some border overlap, leading to the impossibility for the plugin to let you resize the column

I tried to remove fixed: false, from the plugin's parameters list, I edited your html and added a CSS rule, now it works

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

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

Upvotes: 2

Related Questions