JQuery | Resizable Table Example | Table Column Resizing | Resizable Table Columns Using jQuery UI | Resizable table columns with jQuery

Core Part of Code I am Using to Resize Table Columns with Percentage Value

---

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, ''));
}

JSFiddle link to play