在数据表格中，有时候需要拖动表格宽度，查看完整的数据，是很常用的功能。
1 效果
可以用纯JS就可以实现，如下，是正常情况下的表格：
拖动表格标题中间线，拖动后效果如下：
2 代码
HTML代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>演示</title> 5 <script type="text/javascript" src="tabSize.js"></script> 6 <script type="text/javascript"> 7 window.onload = function() { 8 tabSize.init('resizeTable'); 9 }; 10 </script> 11 <style> 12 .resizeBox{overflow-x: auto; width: 500px;} 13 table{width: 100%;border: 1px solid #000;border-collapse:collapse;} 14 th{background: #ccc;} 15 th, td{border: 1px solid #000;} 16 </style> 17 </head> 18 <body> 19 <div class="resizeBox"> 20 <table id="resizeTable"> 21 <thead> 22 <tr><th>标题1</th><th>标题2</th><th>标题3</th></tr> 23 </thead> 24 <tbody> 25 <tr><td>第1行</td><td>第1行</td><td>第1行</td></tr> 26 <tr><td>第2行</td><td>第2行</td><td>第1行</td></tr> 27 <tr><td>第3行</td><td>第3行</td><td>第1行</td></tr> 28 </tbody> 29 </table> 30 </div> 31 </body> 32 </html>
JS代码：
1 /** 2 * Created by ywj on 2017/10/24. 3 */ 4 "use strict"; 5 var tabSize = tabSize || {}; 6 tabSize.init = function (id) { 7 var i, 8 self, 9 table = document.getElementById(id), 10 header = table.rows[0], 11 tableX = header.clientWidth, 12 length = header.cells.length; 13 14 for (i = 0; i < length; i++) { 15 header.cells[i].onmousedown = function () { 16 self = this; 17 if (event.offsetX > self.offsetWidth - 10) { 18 self.mouseDown = true; 19 self.oldX = event.x; 20 self.oldWidth = self.offsetWidth; 21 } 22 }; 23 header.cells[i].onmousemove = function () { 24 if (event.offsetX > this.offsetWidth - 10) { 25 this.style.cursor = 'col-resize'; 26 } else { 27 this.style.cursor = 'default'; 28 } 29 if (self == undefined) { 30 self = this; 31 } 32 if (self.mouseDown != null && self.mouseDown == true) { 33 self.style.cursor = 'default'; 34 if (self.oldWidth + (event.x - self.oldX) > 0) { 35 self.width = self.oldWidth + (event.x - self.oldX); 36 } 37 self.style.width = self.width; 38 table.style.width = tableX + (event.x - self.oldX) + 'px'; 39 self.style.cursor = 'col-resize'; 40 } 41 }; 42 table.onmouseup = function () { 43 if (self == undefined) { 44 self = this; 45 } 46 self.mouseDown = false; 47 self.style.cursor = 'default'; 48 tableX = header.clientWidth; 49 }; 50 } 51 };