jquery实现拖拽table表头改变列宽 jquery实现拖拽table表头改变列宽

本文实例为大家分享了jquery实现拖拽table表头改变列宽的具体代码，供大家参考，具体内容如下
效果:

直接上代码,有注释:

table, td, th {border: 1px solid #ddd; text-align: left; }table {border-collapse: collapse; width: 100%; table-layout: fixed; }th, td {padding: 5px; position: relative; user-select: none; /*text-overflow: ellipsis; */word-break: break-all; }.th-sisehandler {position: absolute; right: -0.5px; top: 0; z-index: 1; width: 5px; height: 100%; padding-left: 4px; cursor: col-resize; }.th-sisehandler::after {content: ''; display: block; width: 10px; background-color: #4CAF50; /*演示为了看效果加上的，可以去掉*/height: 100%; }.siselayer {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; background-color: #4445a049; /*演示为了看效果加上的，可以去掉*/cursor: col-resize; }
Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300
Mark Zuckerberg $250