JSFiddle - React, Tailwind, and code Playground

by Pragnesh Chauhan

HTML

<table id='myTable'><tbody>
<tr><td>a</td><td>1</td><td>8</td></tr>
<tr><td>b</td><td>2</td><td>9</td></tr>
<tr><td>c</td><td>3</td><td>10</td></tr>
<tr><td>d</td><td>4</td><td>11</td></tr>
<tr><td>e</td><td>5</td><td>12</td></tr>
<tr><td>f</td><td>6</td><td>13</td></tr>
<tr><td>g</td><td>7</td><td>14</td></tr>
</tbody></table>

CSS

.rotate {
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
    
    padding-right:50px;
}

JavaScript

TransposeTable('myTable');
function TransposeTable(tableId)
{        
    var tbl = $('#' + tableId);
    var tbody = tbl.find('tbody');
    //var oldWidth = tbody.find('tr:first td').length;
    var oldWidth = 0;
    
     $('tr:nth-child(1) td').each(function () {
        if ($(this).attr('colspan')) {
            oldWidth += +$(this).attr('colspan');
        } else {
            oldWidth++;
        }
    });
    var oldHeight = tbody.find('tr').length;
    var newWidth = oldHeight;
    var newHeight = oldWidth;
    
    var jqOldCells = tbody.find('td');

    var newTbody = $("<tbody></tbody>");
    for(var y=newHeight; y>=0; y--)
    {
        var newRow = $("<tr></tr>");
        for(var x=0; x<newWidth; x++)
        {
            newRow.append(jqOldCells.eq((oldWidth*x)+y));
        }
        newTbody.append(newRow);
    }
    
    tbl.addClass('rotate');

    tbody.replaceWith(newTbody);        
}