JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
      <th>(empty)</th>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
 <tr>
     <th>Heading A</th>
     <td>content for 1 and A</td>
     <td>content for 2 and A</td>
 </tr>
 <tr>
     <th>Heading B</th>
     <td>content for 1 and B</td>
     <td>content for 2 and B</td>
 </tr>
 <tr>
     <th>Heading C</th>
     <td>content for 1 and C</td>
     <td>content for 2 and C</td>
 </tr>
</table>

<button id="switch">switch</button>

JavaScript

function invertTable(table){

    var $table = $(table);
    
    var invertedTable = [];
    
    for(var i=0 ; i < $table.find('tr:first th').length ; i++){
     
        invertedTable.push([]);
        
    }
    
    $table.find('th,td').each(function(){
          invertedTable[$(this).index()].push($(this).text());    
    })
    
    var $newTable = $('<table></table>');
    
    for(var i=0 ; i < invertedTable.length ; i++){
        
        var $newTr = $('<tr></tr>');
        
        for(var j = 0 ; j < invertedTable[i].length ; j++){
            
            if(j == 0 || i == 0){
                $newTr.append('<th>'+invertedTable[i][j]+'</th>');
            }
            else{
                $newTr.append('<td>'+invertedTable[i][j]+'</td>');
            }
            
        }
        
        $newTable.append($newTr);
    }
    
    $table.after($newTable)
    $table.remove();
}

$('#switch').click(function(){

    invertTable('table');

})