JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<table id="myTable">
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<hr />

<table id="newTable"></table>

CSS

body { padding: 30px;}
table, table td {border: 1px solid #ddd;}
table td { padding: 4px;}

JavaScript

function onLoad() {

    var myTable = $('#myTable');
    var newTable = $('#newTable');
    var maxColumns = 0;
    // Find the max number of columns
    for (var r = 0; r < myTable.rows.length; r++) {
        if (myTable.rows[r].cells.length > maxColumns) {
            maxColumns = myTable.rows[r].cells.length;
        }
    }


    for (var c = 0; c < maxColumns; c++) {
        newTable.insertRow(c);
        for (var r = 0; r < myTable.rows.length; r++) {
            if (myTable.rows[r].length <= c) {
                newTable.rows[c].insertCell(r);
                newTable.rows[c].cells[r] = '-';
            }
            else {
                newTable.rows[c].insertCell(r);
                newTable.rows[c].cells[r].innerHTML = myTable.rows[r].cells[c].innerHTML;
            }
        }
    }



}

onLoad();