manish-metacube · January 16, 2018 12:20
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="tr">
 <head>
 <meta charset="utf-8"/>
 <title>Table Column Resize</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
 <script>
 (function(){
  'use strict';
  
  /*
  Table column resize
  Pure vanilla javascript html table cell resize
  */
  
  document.addEventListener('DOMContentLoaded', function(event) {
    var resizable = {
      tables: {},
      
      init: function(args) {
        this.tables[args.table.id] = {};
        this.tables[args.table.id].destroy = null;
        this.tables[args.table.id].width = args.table.offsetWidth; //table width
        this.tables[args.table.id].overflow = args.overflow;
        this.tables[args.table.id].affected = args.affected;
        this.tables[args.table.id].sizes = []; //cell sizes
        let globs = this;
        
        args.table.querySelectorAll('th').forEach(function (th) {
          th.addEventListener('mousedown', function(e) {
            return globs.mousedown(e, args.table);
          });
        });
        
        document.addEventListener('mouseup', function(e) {
          return globs.mouseup(e, args.table);
        });
    
        document.addEventListener('mousemove', function(e) {
          return globs.mousemove(e, args.table);
        });
      },
      
      mousedown: function(e, parent) {
        let table = this.tables[parent.id];
        
        if (table.destroy) { return false; }
        if (e.offsetX > (e.target || e.srcElement).offsetWidth-8) { //th:after offsetX
          table.mouse = e.clientX || e.pageX;
          table.index1 = (e.target || e.srcElement).cellIndex;
          table.index2 = (table.affected) ? (table.index1+1) : parent.rows[0].cells.length-1;

          for (var i = 0; i < parent.rows[0].cells.length; i++) {
            table.sizes[i] = parent.rows[0].cells[i].offsetWidth;
          }
          for (var i = 0; i < parent.rows[0].cells.length; i++) {
            parent.rows[0].cells[i].width = table.sizes[i] + 'px';
          }
        }
      },
      
      mouseup: function(e, parent) {
        let table = this.tables[parent.id];
        
        if (table.destroy) { return false; }
        table.index1 = null;
        table.index2 = null;
      },
      
      mousemove: function(e, parent) {
        let table = this.tables[parent.id];
        
        if (table.destroy) { return false; }
        if (table.index1 != null) {
          let moveX = e.clientX || e.pageX;
          let remain = 0;
          
          if (table.overflow) {
            let diffX = (table.mouse - moveX);
            let maxWidth = Math.max(table.sizes[table.index1] - diffX, 40);
            
            parent.rows[0].cells[table.index1].style.width = maxWidth + 'px';
            table.sizes.filter(function(x, i) {
              if (i == table.index1) {
                remain += maxWidth;
              } else if (i !== table.index2) {
                remain += table.sizes[i];
              }
            });
            
            parent.rows[0].cells[table.index2].style.width = Math.max(table.width-remain, 40) + 'px';
            
          } else {
            let index1 = (moveX < table.mouse) ? table.index1 : table.index2;
            let index2 = (moveX < table.mouse) ? table.index2 : table.index1;
            let diffX = Math.abs(table.mouse - moveX);
            let maxWidth = Math.max(table.sizes[index1] - diffX, 40);
            
            parent.rows[0].cells[index1].style.width = maxWidth + 'px';
            parent.rows[0].cells[index2].style.width = table.sizes[index2] + (table.sizes[index1] - maxWidth) + 'px';
          }
        }
      },
      
      destroy: function(table) {
        this.tables[table.id].destroy = true;
      }
    }
    
     resizable.init({
      table: document.getElementById('resizable'),
      overflow: true,
      affected: false
    }); 
  });
 }());
 </script>
 <style>
 * {
  box-sizing: inherit;
 }
 *:before, *:after {
  box-sizing: inherit;
 }
 html {
  box-sizing: border-box;
  font-size: 14px;
  user-select: none;
 }
 div {
  overflow-x: auto;
 }
 table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
 }
 table thead {
  background-color: #e0e0e0;
 }
 table td, table th {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: .5em .6em;
  vertical-align: top;
  resize: both; 
  overflow: auto;
 }
 table th:not(:first-child), table td:not(:first-child) {
  border-left: 1px dashed #cbcbcb;
 }
 table th:not(:last-child) {
  position: relative;
 }
 </style>
 </head>
 <body>

 <div style="width: 100%;">
  <table id="resizable">
    <thead>
      <tr>
        <th width="auto">Name</th>
        <th width="auto">Age</th>
        <th width="auto">Color</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>25</td>
        <td>Red</td>
      
      </tr>
      <tr>
        <td>Claire</td>
        <td>22</td>
        <td>Pink</td>
     
      </tr>
      <tr>
        <td>Tom</td>
        <td>29</td>
        <td>Brown</td>
      </tr>
      <tr>
        <td>Ashe</td>
        <td>29</td>
        <td>Blue</td>
      </tr>
    </tbody>
  </table>
 </div>


 </body>
 </html>
	<!DOCTYPE html>
	<html lang="tr">
	<head>
	<meta charset="utf-8"/>
	<title>Table Column Resize</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
	<script>
	(function(){
	'use strict';

	/*
	Table column resize
	Pure vanilla javascript html table cell resize
	*/

	document.addEventListener('DOMContentLoaded', function(event) {
	var resizable = {
	tables: {},

	init: function(args) {
	this.tables[args.table.id] = {};
	this.tables[args.table.id].destroy = null;
	this.tables[args.table.id].width = args.table.offsetWidth; //table width
	this.tables[args.table.id].overflow = args.overflow;
	this.tables[args.table.id].affected = args.affected;
	this.tables[args.table.id].sizes = []; //cell sizes
	let globs = this;

	args.table.querySelectorAll('th').forEach(function (th) {
	th.addEventListener('mousedown', function(e) {
	return globs.mousedown(e, args.table);
	});
	});

	document.addEventListener('mouseup', function(e) {
	return globs.mouseup(e, args.table);
	});

	document.addEventListener('mousemove', function(e) {
	return globs.mousemove(e, args.table);
	});
	},

	mousedown: function(e, parent) {
	let table = this.tables[parent.id];

	if (table.destroy) { return false; }
	if (e.offsetX > (e.target \|\| e.srcElement).offsetWidth-8) { //th:after offsetX
	table.mouse = e.clientX \|\| e.pageX;
	table.index1 = (e.target \|\| e.srcElement).cellIndex;
	table.index2 = (table.affected) ? (table.index1+1) : parent.rows[0].cells.length-1;

	for (var i = 0; i < parent.rows[0].cells.length; i++) {
	table.sizes[i] = parent.rows[0].cells[i].offsetWidth;
	}
	for (var i = 0; i < parent.rows[0].cells.length; i++) {
	parent.rows[0].cells[i].width = table.sizes[i] + 'px';
	}
	}
	},

	mouseup: function(e, parent) {
	let table = this.tables[parent.id];

	if (table.destroy) { return false; }
	table.index1 = null;
	table.index2 = null;
	},

	mousemove: function(e, parent) {
	let table = this.tables[parent.id];

	if (table.destroy) { return false; }
	if (table.index1 != null) {
	let moveX = e.clientX \|\| e.pageX;
	let remain = 0;

	if (table.overflow) {
	let diffX = (table.mouse - moveX);
	let maxWidth = Math.max(table.sizes[table.index1] - diffX, 40);

	parent.rows[0].cells[table.index1].style.width = maxWidth + 'px';
	table.sizes.filter(function(x, i) {
	if (i == table.index1) {
	remain += maxWidth;
	} else if (i !== table.index2) {
	remain += table.sizes[i];
	}
	});

	parent.rows[0].cells[table.index2].style.width = Math.max(table.width-remain, 40) + 'px';

	} else {
	let index1 = (moveX < table.mouse) ? table.index1 : table.index2;
	let index2 = (moveX < table.mouse) ? table.index2 : table.index1;
	let diffX = Math.abs(table.mouse - moveX);
	let maxWidth = Math.max(table.sizes[index1] - diffX, 40);

	parent.rows[0].cells[index1].style.width = maxWidth + 'px';
	parent.rows[0].cells[index2].style.width = table.sizes[index2] + (table.sizes[index1] - maxWidth) + 'px';
	}
	}
	},

	destroy: function(table) {
	this.tables[table.id].destroy = true;
	}
	}

	resizable.init({
	table: document.getElementById('resizable'),
	overflow: true,
	affected: false
	});
	});
	}());
	</script>
	<style>
	* {
	box-sizing: inherit;
	}
	:before, :after {
	box-sizing: inherit;
	}
	html {
	box-sizing: border-box;
	font-size: 14px;
	user-select: none;
	}
	div {
	overflow-x: auto;
	}
	table {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	}
	table thead {
	background-color: #e0e0e0;
	}
	table td, table th {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: .5em .6em;
	vertical-align: top;
	resize: both;
	overflow: auto;
	}
	table th:not(:first-child), table td:not(:first-child) {
	border-left: 1px dashed #cbcbcb;
	}
	table th:not(:last-child) {
	position: relative;
	}
	</style>
	</head>
	<body>

	<div style="width: 100%;">
	<table id="resizable">
	<thead>
	<tr>
	<th width="auto">Name</th>
	<th width="auto">Age</th>
	<th width="auto">Color</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>John</td>
	<td>25</td>
	<td>Red</td>

	</tr>
	<tr>
	<td>Claire</td>
	<td>22</td>
	<td>Pink</td>

	</tr>
	<tr>
	<td>Tom</td>
	<td>29</td>
	<td>Brown</td>
	</tr>
	<tr>
	<td>Ashe</td>
	<td>29</td>
	<td>Blue</td>
	</tr>
	</tbody>
	</table>
	</div>


	</body>
	</html>