[Solved] Rotating text: HOW?

[ainocss]

I want to rotate a text inside a table cell. How can I do it? I used transform:rotate(-90deg); and did many tests but I always have the same problem. Please check the picture here:
http://www.fileswap.com/dl/3yYaOcrC46/table_rotate_text_error01.png.html

It looks like the box model error but with text not divs…
PS: Guys please answer ASAP because I’m in a hurry.
Thank you!

EDIT// Sorry wrong url. I changed it now.

[__]

Are you rotating the table cell? or its contents? Make a demo on codepen if you need more help, please. An image is not very useful for troubleshooting.

[ainocss]

I want to rotate only the content. I need a table like this figure: http://www.fileswap.com/dl/HFlSEK72Io/calendar_table.png.html

In other words I want only the week days to be rotated (due to the lack of space… imagine how long the table will be if I write 31 times (as many the days of the month) the words “Monday, Tuesday”, etc

Thank you for your help.
PS: I never used codepen before. Is this what you looking for?
http://codepen.io/anon/pen/gsfBE

EDIT// What does it mean by “anonymous”? I just signed up! (?)
What can I do for you to see the code?

EDIT2// Check here: http://pastebin.com/raw.php?i=sWFREx5B

[__]

What does it mean by “anonymous”? I just signed up! (?)
What can I do for you to see the code?

I can see the code just fine. And yes, that’s exactly what I was asking for.

It says “anonymous” because you either don’t have a codepen account, or you weren’t signed in when you created that pen. It’s not really a problem.

I need a table like this figure:

First, give the cells a max-width and height. The width should be one line-height (since we’re rotating), and the height is {some magic number} big enough for the longest word.

Then, add a transform-origin to the .rotate div so it rotates from the top left instead of the center, and give it relative positioning so we can pull it back down and center the rotated element it vertically.

All changes are in the last two selector blocks. Only checked the results in FireFox.

You also might be interested in this article.

[ainocss]

Hello again.
I want to help you very much for your help. Thanks to you I learned a few new tricks. Thank you again.

[__]

sure, you’re welcome

[Author]

Posts