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 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 style script let nx 4 let ny 4 var table document createElement table document body appendChild table 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 oninput change if y 0 x 3 ta style transform origin top left ta style transform rotate 90deg translate 0 100 end x end y function change 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 scrollHeight ta parentElement scrollHeight px ta parentElement style width ta scrollHeight px ta parentElement style height ta scrollHeight px ta style width ta scrollWidth px ta style height ta scrollHeight px ta style height ta parentElement offsetWidth 0 px else console log ta scrollWidth 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 change script 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 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 style script let nx 5 let ny 5 var table document createElement table document body appendChild table 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 oninput change if x 0 y 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 end x end y function change 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 scrollHeight ta parentElement scrollHeight px ta parentElement style width ta scrollHeight px ta parentElement style height ta scrollHeight px ta style width ta scrollWidth px ta style height ta scrollHeight px ta style height ta parentElement offsetWidth px ta style width ta parentElement offsetHeight px else console log ta scrollWidth 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 change script
ts inside that grow or shrink to match the cell dimension Also updating all cells so they are correct 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 style script let nx 5 let ny 5 var table document createElement table document body appendChild table 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 oninput change if x 0 y 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 end x end y function change 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 scrollHeight ta parentElement scrollHeight px ta parentElement style width ta scrollHeight px ta parentElement style height ta scrollHeight px ta style width ta scrollWidth px ta style height ta scrollHeight px ta style height ta parentElement offsetWidth px ta style width ta parentElement offsetHeight px else console log ta scrollWidth 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 change script