Diagonal column headings

Question

I have column headings with long text in an html table, and I would like to display the headings at a 45 degree angle (similar to what can be done in Excel).

Is there a standard, cross-browser way to do this using CSS or JavaScript?

I started playing with css3please.com, but the rotation does not seem to work, at least in IE 7. Also, another problem is that the CSS rotates around the center of the element while I need to rotate left side.

Any pointers would be appreciated!

Answer 1

Demo: http://jsfiddle.net/wdm954/Z2HHu/1/

-moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform: rotate(-45deg); 

Answer 2

One way would be to draw text on a bitmap or gif and display it. The main advantage is that it will work in all browsers.