JSFiddle - React, Tailwind, and code Playground

HTML

<table id="transposeThis">
    <tr>
        <th>H1</th>
        <th>H2</th>
        <th>H3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>4</td>
    </tr>
    <tr>
        <td>2</td>
        <td>5</td>
        <td>8</td>
    </tr>
    <tr>
        <th>H1</th>
        <th>H2</th>
        <th>H3</th>
        <th>H4</th>
    </tr>
    <tr>
        <td>3</td>
        <td>6</td>
        <td>9</td>
        <td>10</td>
    </tr>
</table>


<p><a href="#" id="transposButton">Do it.</a></p>

CSS

td, th { padding:5px; border:1px solid #ccc;}

th { background-color: silver; font-weight: bold }

JavaScript

$("a#transposButton").click(function(){
    $("table#transposeThis").each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(rowToColIndex){
            $(this).find("td, th").each(function(colToRowIndex){
                if(newrows[colToRowIndex] === undefined) { newrows[colToRowIndex] = $("<tr></tr>"); }
                while(newrows[colToRowIndex].find("td, th").length < rowToColIndex){
                	newrows[colToRowIndex].append($("<td></td>"));
                }
                newrows[colToRowIndex].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });
    
    return false;
});