How can I display vertical text in table headers, using HTML-CSS?

Question

I am transforming a Word document to CSS. In it there is a big table with a table header displaying the header with vertical text. The header has to be read from the bottom to the top. How can I fix this? Still learning coding ;-)

Thank you in advance.

Answer 1

Hi, this might help you:

https://generatedcontent.org/post/45384206019/writing-modes

https://codepen.io/armandsp/pen/qbPvBQ

Answer 2

You just solved yourself, nice to know the solution! :)

Answer 3

Hm, good question, I didnt use it yet, not sure what if you change -90 to 90? Maybe Im wrong, havent tested the code in codepen or here

or maybe writing-mode: vertical-lr or sideways-lr

Answer 4

CodeX: using writing-mode:tb-rl and transform:rotate(-180deg) works correctly! Thank you for your help!

Answer 5

Hi CodeX, I tried the first solution and this a big step, thnx for that. Using writing-mode: vertical-rl and text-orientation: sideways-right doesn't fix the problem because we have to read from the top to the bottom instead bottom to top. Do you know another solution besides using -90 degrees?