JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<table class="mytable">
    <tr>
        <th></th><th class="vertical">These</th><th class="vertical">are</th><th class="vertical">headers</th>
    </tr>
    <tr>
        <th>over</th><td>A1</td><td>B1</td><td>C1</td>
    </tr>
    <tr>
        <th>here</th><td>A2</td><td>B2</td><td>C2</td>
    </tr>
    <tr>
        <th>too</th><td>A3</td><td>B3</td><td>C3</td>
    </tr>
</table>

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;
}

JavaScript

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





$(document).ready(function(){
    $('.mytable').rotateTableCellContent();
});