Rotate text in header of table

I'm trying to rotate some header texts in a table, however it seems to be a right mess. Im not great at CSS, and really dont understand the mess it causes and how to fix

Would it be possible for someone to assist me in sorting my mess out :-(
http://jsfiddle.net/UNj7d/
tonelm54Asked:
Who is Participating?
Advertise Here
 
GaryConnect With a Mentor Commented:
Sometimes its easier just doing it yourself

http://jsfiddle.net/GaryC123/UNj7d/9/

jQuery in question
var w=0
$("#Table1 th").each(function(){
    $(this).html('<div class="rotated">' + $(this).html() + '</div>')
    $(this).width()>w?w=$(this).width():w=w
})
$("#Table1 th div").each(function(){
    $(this).css("margin-top",(w-$(this).width()+5)+"px")
})

Open in new window

May need some tweaking
0
 
GaryCommented:
I suggest using a jquery plugin
http://davidjs.com/2011/07/rotate-table-cell-content-jquery/

Getting this to work properly cross browser is a ****
0
 
tonelm54Author Commented:
Thanks Gary, I had looked at that before, however I wanted to rotate by 270 (or -90) instead of 90 (+90), however I had the same issue as 'Timothy Watson' who also couldnt rotate the text the other way :-(
0
 
GaryCommented:
You just need to change the CSS to -90

I'm sure this is the one I used some time back, I'll throw a fiddle together now.
0
 
Pius AnyebeCommented:
I came accross this and it worked fine... Now id like one of my table header Horizontal. How  can i achieve that using your script..
am not good with javascript yet.
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.