First of all, if I rotate a span in a td or th, it doesn't rotate. I have to make it either position absolute or display:block to rotate it. absolute position is not an option for me so I went ahead with display:block.

here is my code :

I am using following css

.thetable th span {
    transform: rotate(270deg);
    display: block;

If you take a look output, you'll notice that although spans are being rotated to 270deg, they still consume the original space and not actual space.

I hope I am able to explain my problem correctly.

Recommended Answers

All 2 Replies

It looks to me like it's doing exactly whats asked of it.
if you rotate your phone 270deg, it doesn't change shape, and neither will a tea tray, or a slice of bread, or a mouse mat, or a printed piece of html!
To achieve what I think you do you will have to individually print and rotate each word, and set them out somehow with divs, very complicated though.

It is supposed to rotate as per your code. Have you tried web-kits and moz-kit to make it compatible with the browsers? Maybe you're viewing it in a browser that does not support CSS3 properties. As with the block, well tables elements like td tr don't work on their own without any object placed within them.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.