JSFiddle - React, Tailwind, and code Playground

HTML

<table>
      <tr>
        <th>Test1</th>
        <th>Test2</th>
        <th>Test3</th>
      </tr>
      <tr>
        <td>Test4</td>
        <td>Test5</td>
        <td>Test6</td>
      </tr>
      <tr>
        <td>Test7</td>
        <td>Test8</td>
        <td>Test9</td>
      </tr>
    </table>
<p><a href="#">Invert it</a>
</p>

CSS

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

JavaScript

$("a").click(function () {
    $("table").each(function () {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function () {
            var i = 0;
            $(this).find("td,th").each(function () {
                i++;
                if (newrows[i] === undefined) {
                    newrows[i] = $("<tr></tr>");
                }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function () {
            $this.append(this);
        });
    });

    return false;
});