I am trying to get the names in the heading row of a table run vertically, from the bottom, at a slight angle.
I have tried getting the text to run vertically with:
displayTable.rows[i].cells[j].style.writingMode="vertical-rl";
This works in Firefox, but not Chrome
So I have used the following code:
displayTable.rows[i].cells[j].style.whiteSpace = 'nowrap';
displayTable.rows[i].cells[j].style.transformOrigin = "0% 100%";
displayTable.rows[i].cells[j].style.transform = 'rotate(-80deg)';
Which almost works (see image in link below)
www.perceptiondynamics.info/Screenshot_2021-01-12 QUIZ.png
The problem is that the text is offset by one column. So I have tried the following code:
displayTable.rows[i].cells[j].style.left = String(displayTable.rows[i].cells[j].offsetLeft + tempp) + 'px';
To try and move the text to the right (because tempp is set to the column width)
I have also tried the following code:
displayTable.rows[i].cells[j].style.transform = "translateX(String(tempp)+"px")";
without success
I have also tried to remove the border with the following code:
displayTable.rows[i].cells[j].border="0";
However, this does not work either.
What am I doing wrong please?