Dynamically add remove rows columns Not just rotated cells but cells with input elements inside that grow or shrink to match the cell dimension Also updating all cells so they are correct Option to rotate 90 deg clockwise or counterclockwise Align to the top or bottom Limit body cells to 1 character Auto replace body characters style box sizing border box body min height 500px table td tr border 0px dashed gray position relative tr td width 30px height 30px input resize none width 30px height 30px text align center vertical align middle padding 0px margin 0px display flex align items center justify content center background color yellow position absolute left 0px top 0px outline 0 border 0 padding 20px text align left border radius 5px style button onclick addrow AddRow button button onclick deleterow DeleteRow button button onclick addcolumn AddColumn button button onclick deletecolumn DeleteColumn button script let nx 5 let ny 5 var table document createElement table table id myTable document body appendChild table let randomLetter let l ABCEDEFGHIJKLMNOPQRSTUVWXYZ return l Math floor Math random l length let inputkey event let ss new String event key if event key length 0 event key length 1 return if event key return event srcElement value event key for let y 0 y ny y var row table insertRow 1 for let x 0 x nx x var cell row insertCell 1 cell innerHTML x nx y let ta document createElement input ta className myinput cell appendChild ta ta value x nx y ta x x ta y y ta oninput change rotate 90 if x 0 x nx 1 y 0 y ny 1 ta style transform origin top left ta style transform rotate 90deg translate 100 0 ta style background color rgba 0 255 0 0 2 if y 0 top ta style text align left else ta style text align right else if x 0 y 0 x nx 1 y 0 x 0 y ny 1 x nx 1 y ny 1 ta value ta style background color lightgray else if x 0 x nx 1 y 0 y ny 1 ta style background color orange else ta maxLength 1 ta onkeydown inputkey rotate 90 if x 0 y ny 1 ta style transform origin top left ta style transform rotate 90deg translate 0 100 ta style background color rgba 0 255 0 0 2 ta style text align left end x end y function change let table document getElementById myTable for let y 0 y table rows length y for let x 0 x table rows 0 cells length x table rows y cells x children 0 x x table rows y cells x children 0 y y table rows y cells x children 0 value x x y let tas document getElementsByClassName myinput tas tas tas forEach ta ta style width 0px ta style height 0px ta parentElement style width 0px ta parentElement style height 0px for let n 0 n 2 n let tas document getElementsByClassName myinput tas tas tas forEach ta if ta style transform ta parentElement style height ta scrollWidth px ta style width ta scrollWidth px ta style height ta parentElement offsetWidth px ta style width ta parentElement offsetHeight px else ta style width 100 ta style height 100 ta style width ta scrollWidth px ta style height ta scrollHeight px ta parentElement style width ta scrollWidth 0 px ta parentElement style height ta scrollHeight 0 px end tas for n end change change Dynamically changing size of the table function addrow let table document getElementById myTable let row table insertRow 1 let nr table rows length 1 let nc table rows nr cells length for let c 0 c nc c let cell row insertCell c let ta document createElement input ta className myinput ta oninput change cell appendChild ta if c 0 c nc 1 ta value ta style background color orange else ta value randomLetter ta maxLength 1 ta onkeydown inputkey change function addcolumn let table document getElementById myTable let nr table rows length for let r 0 r nr r let cell table rows r insertCell 1 let ta document createElement input ta className myinput ta oninput change cell appendChild ta if r 0 r nr 1 ta value ta style transform origin top left ta style transform rotate 90deg translate 100 0 ta style background color rgba 0 255 0 0 2 if r 0 top ta style text align left else ta style text align right else ta value randomLetter ta maxLength 1 ta onkeydown inputkey change function deleterow let table document getElementById myTable let nr table rows length if nr 3 return document getElementById myTable deleteRow 1 change function deletecolumn let table document getElementById myTable let nc table rows 0 cells length if nc 3 return for let r 0 n table rows length r n r table rows r deleteCell 1 var table handle change script
y table rows y cells x children 0 value x x y let tas document getElementsByClassName myinput tas tas tas forEach ta ta style width 0px ta style height 0px ta parentElement style width 0px ta parentElement style height 0px for let n 0 n 2 n let tas document getElementsByClassName myinput tas tas tas forEach ta if ta style transform ta parentElement style height ta scrollWidth px ta style width ta scrollWidth px ta style height ta parentElement offsetWidth px ta style width ta parentElement offsetHeight px else ta style width 100 ta style height 100 ta style width ta scrollWidth px ta style height ta scrollHeight px ta parentElement style width ta scrollWidth 0 px ta parentElement style height ta scrollHeight 0 px end tas for n end change change Dynamically changing size of the table function addrow let table document getElementById myTable let row table insertRow 1 let nr table rows length 1 let nc table rows nr cells length for let c 0 c nc c let cell row insertCell c let ta document createElement input ta className myinput ta oninput change cell appendChild ta if c 0 c nc 1 ta value ta style background color orange else ta value randomLetter ta maxLength 1 ta onkeydown inputkey change function addcolumn let table document getElementById myTable let nr table rows length for let r 0 r nr r let cell table rows r insertCell 1 let ta document createElement input ta className myinput ta oninput change cell appendChild ta if r 0 r nr 1 ta value ta style transform origin top left ta style transform rotate 90deg translate 100 0 ta style background color rgba 0 255 0 0 2 if r 0 top ta style text align left else ta style text align right else ta value randomLetter ta maxLength 1 ta onkeydown inputkey change function deleterow let table document getElementById myTable let nr table rows length if nr 3 return document getElementById myTable deleteRow 1 change function deletecolumn let table document getElementById myTable let nc table rows 0 cells length if nc 3 return for let r 0 n table rows length r n r table rows r deleteCell 1 var table handle change script