开发者

Diagonal Column Headers

开发者 https://www.devze.com 2023-02-26 20:23 出处:网络
I have column headers with long text in a html table, and I\'d like to display the headers at a 45 degree a开发者_高级运维ngle (similar to what can be done in Excel).

I have column headers with long text in a html table, and I'd like to display the headers at a 45 degree a开发者_高级运维ngle (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!


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

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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消