jQuery table header alignment -

i pretty new to, well, web programming , ask... in following code, how align rotated fields table looks proper, fields aligned, , not off screen?

this rotation function using. (i posted rid of errors, need see jsfiddle link know mean)

.r90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); width: 1.25em; line-height: 1ex; font-family:verdana; } 

http://jsfiddle.net/michaela_elise/cfnhp/15/

thank in advance, michaela

wrap th text in span , try this:

.r90 span {     -webkit-transform: rotate(90deg);     -moz-transform: rotate(90deg);     -o-transform: rotate(90deg);     -ms-transform: rotate(90deg);     transform: rotate(90deg);     font-family:verdana;     display:inline-block;     line-height:80px;     height:80px; } 

demo

---

if want set height , line-height dynamically based on longest text, can use function:

var maxspanheight = 0; $(".r90 span").each(function(){     if (maxspanheight < $(this).width())         maxspanheight = $(this).width(); }).css({     'height':maxspanheight,     'line-height':maxspanheight+'px' }); 

demo