Creating HTML table with vertically oriented text as table header

html css vertical-text
user1054310 picture user1054310 · Feb 24, 2012 · Viewed 56.3k times · Source

I would like to create a HTML table with vertically written text as header (i.e. header text is rotated 90 degrees). I am using the flollowing style

<th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:1px;padding-top:10px;padding-bottom:10px; " align="left"  id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>

In MS IE 9.x is displays OK. In Firefox and Chrome the header seems to float over the top of the table, it overlaps with the table rows below it. can somebody please help? I simple have no idea why is this happening. I started out with this tutorial: http://scottgale.com/blog/css-vertical-text/2010/03/01/

TIA, Tamas

Answer

deefour picture deefour · Feb 24, 2012

I don't believe you can get the height of the <th> to change when rotating it's contents with CSS alone. Below is how I do this with a bit of jQuery.

http://jsfiddle.net/tsYRQ/1004/

Related questions

Bootstrap vertical writing

I want to write text with Bootstrap, vertically but not like transform the text 90°. Vertical, but turned and hard to read. But actually written like this: Vertical and not turned I think there was a way to do this with …

Read More
100% height block with vertical text

I have a block of a variable height in which I want to put another block with 100% height and vertical text (bottom-to-top direction) and stack it to the left side of the outer block. Is there a way to achieve …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More