How can I make the headings of a table have vertical, angled text?

IanR

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?

Sempervivum

Try if you can fix it by use of transform-origin. Its default value is center center which causes the bottom edge to shift to the left. Set it to left bottom.
This css works for me:

        table {
            /* create space on top for the rotated items */
            margin-top: 5em;
        }

    th {
        /* rotating will shift the left top corner to the left
        therefore we apply a shift of 1.1em to the bottom */
        transform: rotate(-80deg) translateY(1.1em);
        transform-origin: left bottom;
        /* prevent the items from increasing the width of the columns */
        width: 1em;
        /* shift text to the left or bottom after rotation */
        text-align: left;
    }

IanR

Sempervivum - brilliant - Thank you again for your time.
I had to do it in javascript, but your code made me realise that the different transforms could not be on separate lines - so in the end I had:
displayTable.rows[i].cells[j].style.transform = ("rotate(-80deg) translateX(2px) translateY("+temppx+")") ;
But I would not have seen that without your code - Thanks again