Resizable Table Example Drag the columns and adjust the spacing added to specific tables or all tables on the page Extra checks called on a resizable table multiple times it won t repeatdly add resizers Extra check multiple tables with different data Set 100 window width and prevent the last column from resizing always stays the width but the inner columns are resizable style box sizing border box table border collapse collapse width 100 td padding 5px 15px text align left table td border 1px solid 000 style table tr td Name td td Age td td Food td tr tr td Bob td td 100 td td Apples td tr table table tr td City td td Power td td Game td td Gender td tr tr td Paris td td 10GW td td Zoom td td Other td tr table script var tables document getElementsByTagName table debug testing for var i 0 i tables length i resizableGrid tables i for var i 0 i tables length i resizableGrid tables i for var i 0 i tables length i resizableGrid tables i function resizableGrid table var rows table rows if rows 0 return if rows 0 length 1 return table style overflow hidden var tableHeight table offsetHeight for let i 0 i rows 0 cells length 1 i last column isn t resizable let cell rows 0 cells i top row of cells only add a resizer if one doesn t exist if cell querySelector tableresizer let div createDiv tableHeight cell appendChild div cell style position relative setListeners div function setListeners div var pageX curCol nxtCol curColWidth nxtColWidth div addEventListener mousedown function e curCol e target parentElement nxtCol curCol nextElementSibling pageX e pageX var padding paddingDiff curCol curColWidth curCol offsetWidth padding if nxtCol nxtColWidth nxtCol offsetWidth padding div addEventListener mouseover function e e target style borderRight 2px solid 0000ff div addEventListener mouseout function e e target style borderRight document addEventListener mousemove function e if curCol var diffX e pageX pageX if nxtCol nxtCol style width nxtColWidth diffX px curCol style width curColWidth diffX px document addEventListener mouseup function e curCol undefined nxtCol undefined pageX undefined nxtColWidth undefined curColWidth undefined function createDiv height var div document createElement div div className tableresizer div style top 0 div style right 0 div style width 5px div style position absolute div style cursor col resize div style userSelect none div style height height px return div function paddingDiff col if getStyleVal col box sizing border box return 0 var padLeft getStyleVal col padding left var padRight getStyleVal col padding right return parseInt padLeft parseInt padRight function getStyleVal elm css return window getComputedStyle elm null getPropertyValue css console log ready script
curCol e target parentElement nxtCol curCol nextElementSibling pageX e pageX var padding paddingDiff curCol curColWidth curCol offsetWidth padding if nxtCol nxtColWidth nxtCol offsetWidth padding div addEventListener mouseover function e e target style borderRight 2px solid 0000ff div addEventListener mouseout function e e target style borderRight document addEventListener mousemove function e if curCol var diffX e pageX pageX if nxtCol nxtCol style width nxtColWidth diffX px curCol style width curColWidth diffX px document addEventListener mouseup function e curCol undefined nxtCol undefined pageX undefined nxtColWidth undefined curColWidth undefined function createDiv height var div document createElement div div className tableresizer div style top 0 div style right 0 div style width 5px div style position absolute div style cursor col resize div style userSelect none div style height height px return div function paddingDiff col if getStyleVal col box sizing border box return 0 var padLeft getStyleVal col padding left var padRight getStyleVal col padding right return parseInt padLeft parseInt padRight function getStyleVal elm css return window getComputedStyle elm null getPropertyValue css console log ready script