JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<br>
<table class=mytable>
    <th class=vertical bgcolor=#C0C0C0 align=center> <font color=#FF0000 size=4> Test this </font>
    <p class=vertical> <font color=#FF0000 size=6> out </font></p>

    </th>
</table>
<input type="button" id="transForm" value="Transform">

CSS

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

JavaScript

(function ($) {
    $.fn.rotateTableCellContent = function (options) {

        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 () {
    $("#transForm").click(function () {
        $('.mytable').rotateTableCellContent();
    });

});