Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1207
  • Last Modified:

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/
0
tonelm54
Asked:
tonelm54
  • 3
1 Solution
 
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
 
GaryCommented:
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
 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now