Rotate table cell content with jQuery

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.

6 replies on “Rotate table cell content with jQuery”

  1. Hi, I found your tutorial very helpful and helped me solve a problem that I had spent a couple hours trying to figure out.

    But, I had one question: If I have the cells set to rotate 270 degrees (or -90), how do I get the text start position to be at the bottom of the cell so it displays properly?

    1. Hi, sorry for the late reply. I was busy and there was lot of spam coming in… But I can’t help you right now, I am still very busy, sorry for that. But if you have already figured that out, please write a comment. Thanks:)

    2. I’m pretty excited to see a solution for this ‘270 degrees align to bottom’-question too! After a few tries I haven’t figured out yet how to manage this, so I hope someone can help me out on this.

  2. For the 270deg try this:

    newInnerDiv.css(‘-moz-transform-origin’, (width / 2) + ‘px ‘ + (width / 2) + ‘px’);

    Put that code right before: newDiv.append(newInnerDiv);

    Adjust the vendor prefixes as necessary.

Comments are closed.