Diagonal Column Headers

Question

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

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

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

Any pointers will be appreciated!

I haven't found a satisfying solution. For now my choice is to do a 90 degree rotation. — Christophe, May 02 '11 at 01:33

score 1 · Answer 1 · answered Apr 16 '11 at 05:18

1

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

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

answered Apr 16 '11 at 05:18

wdm

7,121
1
27
29

Thanks for the demo. Same issue as with css3please, I don't see the rotation in IE 7. – Christophe Apr 16 '11 at 06:09
I don't think there's an elegant solution for IE7. Probably going to require some hacks. – wdm Apr 16 '11 at 07:03

score 0 · Answer 2 · answered Apr 16 '11 at 04:01

0

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

answered Apr 16 '11 at 04:01

Steve Wellens

20,506
2
28
69

Diagonal Column Headers

2 Answers2