How to make a long column out of a html table

I am trying to make my timetable made in html look alright on mobile devices.
Thas how the table looks:

I want to splice it into columns and make a long table from those columns, without displaying the hour column. I have succeded only to do it row wise, but not collumn wise.
Here how it should look, except its missing name of the day before displaying classes for that day.

I used this js script:

function transformTable() {
var originalTable = document.getElementById("desktopTable");
var transformedTable = document.getElementById("mobileTable");

for (var i = 1; i < originalTable.rows.length; i++) {
    var row = originalTable.rows[i];
    for (var j = 0; j < row.cells.length; j++) {
        var cell = row.cells[j];
        var newRow = transformedTable.insertRow();
        var newCell = newRow.insertCell();

        // Clone attributes from original cell to the new cell
        for (var k = 0; k < cell.attributes.length; k++) {
            var attr = cell.attributes[k];
            newCell.setAttribute(attr.name, attr.value);
        }

        // Clone nested elements
        var cellContents = cell.cloneNode(true);
        // Remove the cloned <td> element and append its children
        while (cellContents.firstChild) {
            newCell.appendChild(cellContents.removeChild(cellContents.firstChild));
        }
    }
}

}