Text rotate in table header

Webdesign Help
1

I have a problem with CSS. I would like to have the following:
I would like to have the cells “Discipline 1” to “Discipline 5” rotated by -90 degrees as in the cell inside. I have managed that so far.

But what I would like to correct now:

The “D” of Discipline should be aligned at the bottom in the cell.

Currently it in the HTML much too deep.

The content of the cell should be horizontally centered, where as the “x” in the body cells.

Currently it is somewhere

The width of the columns I would like to have much less wide, because I probably need to insert a maximum of 10 more columns “Discipline”.

How can I solve this problem? I can also send you the BSS file.

Attached you can see two screenshots, once what I have in BSS backend and once what is played out on HTML.

Thanks for your help.

Greetings from Switzerland
Rumede

result_html
result_html1423×323 14 KB
position_widht
position_widht1441×1022 155 KB

2

A simple Google search for “make text read up or down” brought the first post which answers your question …
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

And a little further down the page was this one which is basically the same info:
https://www.w3schools.com/cssref/css3_pr_writing-mode.asp

… but …

I don’t know how that works with Bootstrap. You may want to look at Bootstrap’s site and see if there’s provisions for it there:

Hope that helps, and please do, do Google searches prior to posting as the answer is probably there pretty quickly. Might be faster than watching the forums here some days. :slight_smile: