vanilla js HTML column resizing

vanillajsColresize.js

(function () {
  var thElm;
  var startOffset;

  // Create 'grip' elements near the right border and bind mouse down event to
  // resize
  Array.prototype.forEach.call(
    document.querySelectorAll("table th"),
    function (th) {
      th.style.position = 'relative';

      var grip = document.createElement('div');
      grip.innerHTML = " ";
      grip.style.top = 0;
      grip.style.right = 0;
      grip.style.bottom = 0;
      grip.style.width = '5px';
      grip.style.position = 'absolute';
      grip.style.cursor = 'col-resize';
      grip.addEventListener('mousedown', function (e) {
        thElm = th;
        startOffset = th.offsetWidth - e.pageX;
      });

      th.appendChild(grip);
    });

  // On mouse move event
  document.addEventListener('mousemove', function (e) {
    if (thElm) {
      thElm.style.width = startOffset + e.pageX + 'px';
    }
  });

  // On mouse up event
  document.addEventListener('mouseup', function () {
    thElm = undefined;
  });
})();

Hello @samdeesh here is an implementation of that http://jsfiddle.net/thrilleratplay/epcybL4v/