Programátorovy zápisky

Rotating text via CSS is now relatively easy. There is a few of good tutorials and demos out there. But they lack one thing – they don’t explain how to rotate text in a table cell. Few days ago during pair programming with Michal Tehnik we run into trouble. We managed to rotate the text, but it only worked properly in Internet Explorer. (via writing-mode)

Broken table with rotated text in Google Chrome

In Chrome and Firefox the table cells shrinked, because elements rotated via css rotate property are still “placed” in their original position.

Demo of rotated text in TheCssNinja.com

To fix this behaviour we need to calculate first width and height of the element before we rotate it. Then wrap it in a (new) div element and mix width and height for this div. Height goes for width and vice versa.  Now this div has the  same dimensions as the rotated element, which are then copied by the containing cell.

We wrote jQuery plugin for this.

(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' });

			newDiv.append(newInnerDiv);

			betterCells.push(newDiv);
		});

		cellsToRotate.each(function (i) {
			$(this).html(betterCells[i]);
		});
	};
})(jQuery);

And the css

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

thead th {
  vertical-align: top;
}

table .vertical {
  white-space: nowrap;
}

Usage

//Basic usage
$('.tableSelector').rotateTableCellContent();

//specify class name of cell you want to rotate
$('.tableSelector')
 .rotateTableCellContent({className: 'whatever'});

You can download this plugin at github.

Try the demo here.