css transform rotate reserves the original space and not actual space

[bilal_fazlani]

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 : http://jsfiddle.net/bilalfazlani/95V5G/

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.

[TonyG_cyprus]

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.

[crescendo]

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.