Dynamically add editable columns and rows script src https cdnjs cloudflare com ajax libs jquery 3 6 0 jquery min js script style body min height 400px canvas align content center height 1000px my table margin 0 2px 2px 0 border FFF border 1px solid rgb 72 170 230 display inline block tr background rgb 72 170 230 td width 50px height 50px add height 52px width 52px background rgb 243 165 0 cursor pointer color FFF text align center font family Open Sans sans serif transition property background transition duration 1s transition timing function linear addColumn display inline block vertical align top margin 2px 0 0 0 add hover background rgb 246 192 82 addColumnChild line height 50px addRow vertical align bottom margin 0 0 0 2px addRowChild line height 50px del height 52px width 52px background rgb 178 0 0 cursor pointer color FFF text align center font family Open Sans sans serif transition property background transition duration 1s transition timing function linear delColumn display inline block vertical align top margin 2px 0 0 0 del hover background rgb 202 76 73 delColumnChild line height 50px delRow vertical align left margin 0 0 0 2px delRowChild line height 50px style table id my table tr id default row td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr table div id addColumn class add div id addColumnChild b b div div div id addRow class add div id addRowChild b b div div script let tds document getElementsByTagName td for let i 0 i tds length i tds i contentEditable true tds i innerHTML i addColumnChild click function console log adding row let table document getElementById my table let trs table rows for let i 0 i trs length i let td trs i insertCell 1 td contentEditable true addRowChild click function console log adding row let table document getElementById my table var row table insertRow 1 const numcols table rows 0 cells length for let i 0 i numcols i let td row insertCell 1 td innerHTML td contentEditable true let numcols table rows 0 length script Resizable editable cells edit content and resize them style body min height 300px contenteditable outline 0px solid transparent table border collapse collapse border spacing 0px td border 2px solid black padding 0 margin 0px overflow auto resize auto vertical align top div overflow auto width 100 height 100 margin 0px padding 0px border 1px solid black display block td div border 0 width auto height auto min height 20px min width 20px style table tr td div one div td td div two div td td div three div td tr tr td div four div td td div five div td td div six div td tr tr td div seven div td td div eight div td td div nine div td tr table script let divs document getElementsByTagName div for let i 0 i divs length i divs i contentEditable true divs i style padding 10px script
id addRowChild b b div div script let tds document getElementsByTagName td for let i 0 i tds length i tds i contentEditable true tds i innerHTML i addColumnChild click function console log adding row let table document getElementById my table let trs table rows for let i 0 i trs length i let td trs i insertCell 1 td contentEditable true addRowChild click function console log adding row let table document getElementById my table var row table insertRow 1 const numcols table rows 0 cells length for let i 0 i numcols i let td row insertCell 1 td innerHTML td contentEditable true let numcols table rows 0 length script Resizable editable cells edit content and resize them style body min height 300px contenteditable outline 0px solid transparent table border collapse collapse border spacing 0px td border 2px solid black padding 0 margin 0px overflow auto resize auto vertical align top div overflow auto width 100 height 100 margin 0px padding 0px border 1px solid black display block td div border 0 width auto height auto min height 20px min width 20px style table tr td div one div td td div two div td td div three div td tr tr td div four div td td div five div td td div six div td tr tr td div seven div td td div eight div td td div nine div td tr table script let divs document getElementsByTagName div for let i 0 i divs length i divs i contentEditable true divs i style padding 10px script