Core Part of Code I am Using to Resize Table Columns with Percentage Value
JSFiddle link to play
var table = $("#table-css-border-1"), tw = table.width(); table.find("tr").each(function() { var tr = $(this), c = 0; tr.find("td, th").each(function() { var te = $(this), ew = ((te.width() * 100) / tw); te.css("width", ew + "%").addClass("resizable column-" + (++c)); te.data("cc", ".column-" + c); te.data("nc", ".column-" + (c + 1)); }); tr.find("td:last-child, th:last-child").removeClass("resizable"); }); var r = $("#table-css-border-1 .resizable"), mw = 50; r.resizable({ handles: 'e', maxWidth: mw, start: function(e, ui) { var td = $(ui.element); var nd = td.next() || td.previous(); r.resizable( "option", "maxWidth", gw(td) + gw(nd) - mw); table.find(td.data("cc")).css("width", ""); table.find(td.data("nc")).css("width", ""); }, stop: function(e, ui) { var td = $(ui.element); var nd = td.next() || td.previous(); table.find(td.data("cc")).css("width", (((td.width()+5) * 100)/tw)+"%"); table.find(td.data("nc")).css("width", ((nd.width() * 100)/tw)+"%"); } }); function gw(e) { return parseFloat(e.css("width").replace(/px/g, '')); }