Vertically rotate text inside an HTML table header cell

Question

I am using the following css to rotate the text inside table header cells but the header cells is of the same width as if the text were horizontal.How can I just rotate the text and the width will reduce automatically..

    table#MyTable tr th a{     color: #FFFFFF;     display: block;     /*Firefox*/     -moz-transform: rotate(-90deg);     /*Safari*/     -webkit-transform: rotate(-90deg);     /*Opera*/     -o-transform: rotate(-90deg);     /*IE*/     writing-mode: tb-rl;     filter: flipv fliph;     padding: 60px 1px; } 

Answer 1

If you need to adjust just the width of the cells and they contain only one line of text each you can do this: http://jsfiddle.net/sSP8W/3/ — set width of an element to it's line-height.

The problem with CSS3-transforms is that they work like as CSS' position: relative: their original box stays the same, so rotating, skewing etc. don't cause the changes in the element's dimensions. So: there is really no perfect CSS solution, you can use JS to adjust the dimensions, or try to find hackety workarounds. So if you have only links in a table, you can do something like that: http://jsfiddle.net/sSP8W/4/ — rotating the table itself.

If your case have another content that you don't want to rotate — update the post, so we could try to find a better solution.

upd: Just found out a solution to the rotated text in tables: using some magic with vertical paddings we could make cells stretch to the content, so look at this almost final example: http://dabblet.com/gist/4072362

Answer 2

I solved it this using a jQuery plugin by David Votrubec and the comment by Mike below the blog post.

Put this in a .js-file:

(function ($) {   $.fn.rotateTableCellContent = function (options) {   /* Version 1.0 7/2011 Written by David Votrubec (davidjs.com) and Michal Tehnik (@Mictech) for ST-Software.com */  var cssClass = ((options) ? options.className : false) || "vertical";  var cellsToRotate = $('.' + cssClass, this);  var betterCells = []; cellsToRotate.each(function () { var cell = $(this) , newText = cell.text() , height = cell.height() , width = cell.width() , newDiv = $('<div>', { height: width, width: height }) , newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });  newInnerDiv.css('-webkit-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px'); newInnerDiv.css('-moz-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px'); newDiv.append(newInnerDiv);  betterCells.push(newDiv); });  cellsToRotate.each(function (i) { $(this).html(betterCells[i]); }); }; })(jQuery); 

And this at the top of your page:

<script src="rotatetablecellcontent.js" type="text/javascript"></script> <script type="text/javascript">     $(document).ready(function(){         $('.yourtableclass').rotateTableCellContent();     }); </script> 

And this in your CSS:

/* Styles for rotateTableCellContent plugin*/ table div.rotated {     -webkit-transform: rotate(270deg);     -moz-transform: rotate(270deg);     writing-mode:tb-rl;     white-space: nowrap; }  thead th {     vertical-align: top; }  table .vertical {     white-space: nowrap; } 

Then make sure your table has the class "yourtableclass", and that all the TDs you want rotated have the class "vertical".

Here's a demo running in a jsFiddle.

Hope it helps someone, even though I'm a year late!