Inspired by an article by Chris Coyier published at css-tricks about rotating table header cells I
fumbled my way to a JavaScript solution, that fits all my needs.

A demo is located here and the sources are located at GitHub
It should work in all recent browsers, it even works on my Nexus 5.

The CSS class used for this:

Code:
.hgs_rotate{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    white-space: nowrap; 
}
And here does the JavaScript
Code:
function rotateHeadCell(tableId) {
    'use strict';
    var aRows = document.getElementById(tableId).rows, padding = 4;
    [].every.call(aRows, function(row) {
        if (row.cells[0].tagName !== 'TH') {
            return false;
        }
        rotateCell(row);
        return true;
    });
    function rotateCell(row) {
        var maxw = -1;
        [].forEach.call(row.cells, function(cell) {
            var w;
            if (!cell.hasAttribute("data-rotate")) {
                cell.vAlign = 'bottom';
                return;
            }
            cell.vAlign = 'middle';
            cell.innerHTML = '<div class=hgs_rotate>' + cell.innerHTML + '</div>';
            w = cell.clientWidth;
            if (w > maxw) {
                maxw = w;
                cell.style.height = maxw + padding + 'px';
            }
            cell.firstChild.style.width = cell.firstChild.clientHeight + 'px';
        });
        if (maxw === -1) {
            return;
        }
        [].forEach.call(row.cells, function(cell) {
            var dd;
            if (!cell.hasAttribute("data-rotate")) {
                return;
            }
            dd = cell.firstChild;
            dd.style.top = (cell.clientHeight - dd.clientHeight - padding) / 2 + 'px';
            dd.style.left = '0px';
            dd.style.position = 'relative';
        });
    }
}
Here is how to use it;

How to instrument your table:

  • Give your tabel an ID like <table id=tab1>
  • Add 'data-rotate' as an attribute to cells you want to rotate
    like <th data-rotate>rotate </th>
  • include the given CSS class .hgs_rotate
  • Add an event handler for the load event. Inside this handler
    call rotateHeadCell('tab1');


Regards