0

I had rotated the the header text in a table but now the problem is, I am not able to center it. It should be aligned center but it just starts from the center and looks very weird. I can't to post image as this is my first question.

My Css:

<style> .myClass {height: 350px; column-width: 20px; text-align: left; white-space:nowrap; g-origin:50% 50%; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } </style>

and My Html Table

<table border="1"> <tr> <th class="myClass">Secondlongheadear </th> <th class="myClass">Secondlongheadear </th> <th class="myClass">Second long headear </th> </tr> <tr> <td>foo</td> <td>foo</td> <td>foo</td> </tr> </table>
Improve this question
2
  • What's g-origin? Maybe you wanted transform-origin? Commented Oct 16, 2021 at 17:41
  • @AnuragSrivastava I was just searching for code to align it. Dont know the exact meaning of this. transform-origin is also not working. please help to align it if possible Commented Oct 16, 2021 at 17:49

1 Answer 1

Reset to default
0 

.myClass { white-space: nowrap; writing-mode: vertical-rl; text-orientation: mixed; padding: 8vh; } table { font-size: calc(1vh + 2vw); vertical-align: center; text-align: center; width: 80vw; height: 70vh; } table tr:last-child { max-height: 20%; background-color: red; }
<table> <caption>Your Table <caption> <thead> <th class="myClass">Secondlong headear </th> <th class="myClass">Secondlong headear </th> <th class="myClass">Second long headear </th> </thead> <tbody> <tr> <td>tbody</td> <td>tbody</td> <td>tbody</td> </tr> </tbody> <tfoot> <td class="costam">foo</td> <td>foo</td> <td>foo</td> </tfoot> </table>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for Reply, but "writing-mode: vertical-rl" is not supported by all browsers. I already had tried this.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.