JSFiddle - React, Tailwind, and code Playground

by bthorn

HTML

<br>
<br>
<table class=mytable>
    <th class=vertical align=center>Test this out</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: nowrap;
  }
  thead th {
      vertical-align: top;
  }
  table .vertical {
      white-space: nowrap;
  }

  table.mytable {
       background-color: #C0C0C0;
       color: #FF0000;   
  }

  table.red {
       color: #FF0000;   
  }
   
  table.orange {
       color: #FF9900;
  }

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();
    });
    
    var table = $('.mytable');
    var curr_class = 'red';
    var changeColor = function()
    {
        table.removeClass(curr_class);
        curr_class = curr_class === 'red' ? 'orange' : 'red';
        table.addClass(curr_class);
        window.setTimeout(changeColor, 1000);
    }
    changeColor();
});